Chart js - 折线图为边界线切割边框

Question

我对图表 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/

Answer 1

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

发生这种情况时，您必须采取更明确的比例定义。在这种情况下，您可以设置勾号 min 和 max，以便比例尺延伸超过您的数据点，从而防止线剪裁。

这是一个例子。

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

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

Answer 2

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

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

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

Chart js - 折线图为边界线切割边框

Chart js - Line chart cuts border for lines in boundaries

chart.js

chart.js2