Chart js - 折线图切割边界线的边界答案

【问题标题】：Chart js - Line chart cuts border for lines in boundariesChart js - 折线图切割边界线的边界
【发布时间】：2017-03-14 12:15:36
【问题描述】：

我对图表 js 折线图如何为边界线切割边界感到惊讶。我预计 [1 月、2 月] 的边界与 [2 月、3 月] 的边界相同。我知道图表 js 为刻度和刻度提供了一些回调（例如 afterBuildTicks），然后我可以订阅此事件并修改图表刻度数组。但我认为这是开销。任何想法如何让它更容易？

JSFiddle : https://jsfiddle.net/yoax05yx/

var canvas = document.getElementById('myChart');
enter code here var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
    {
        data: [0, 0, 20, 0, 0, 100, 100],
        fill: false,
    }
]};
var myBarChart = Chart.Line(canvas,{
data:data, options:{}});

相同，只有数据：https://jsfiddle.net/muz639kL/1/

【问题讨论】：

标签： chart.js chart.js2

【解决方案1】：

Chart.js 在自动调整刻度大小和确定刻度步长和间距的最佳配置方面做得很好，但它并不总是完美的。在您的示例中，由于您的数据点直接位于 x 轴和顶部网格线上，因此这些线似乎被切断了。

发生这种情况时，您必须更明确地定义比例。在这种情况下，您可以设置刻度线 min 和 max，以便刻度延伸到您的数据点之外，从而防止线剪裁。

这是一个例子。

var myBarChart = Chart.Line(canvas, {
  data: data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: -20,
          max: 140
        }
      }]
    }
  }
});

我分叉了你的 jsfiddle，在你的具体例子中展示了它的样子。这是updated version。

【讨论】：

我可以通过获取图表步长来动态设置图表的最小值和最大值吗？
@EugeneZakharov 实际上，您可以通过实现自己的函数来动态设置最小值和最大值，该函数将从数据集 + 一些缓冲区中返回最小值和最大值。您还可以使用 stepSize 和 fixedStepSize 的组合来帮助 chart.js 更好地自动计算最小值和最大值。

【解决方案2】：

我使用了解决方法来防止线路被切断：

      ticks: {
        callback(tick) {
          if (!Number.isInteger(tick)) {
            return ''
          }

          return tick
        },
        min: -0.9,
        max: 100.9,
      },

【讨论】：