Question

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

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,
      },

图表js - 折线图切割边界线的边框

2 个答案: