不同网格线的步骤

Question

我有与具有为5的步长大小蜱y轴刻度线图，我想有网格线都为1的步骤/间隔也看不出一个明显的方法来做到这一点，无论如何要在chart.js中实现这一点？

在此先感谢！

Answer 1

不幸的是，与当前chart.js之API，还有就是配置网格线布局独立于蜱放置没有干净的方式。换句话说，您不能将轴配置为每5步显示一次刻度，同时每1步仍显示一次网格线。

即使没有干净方式，还有然而，仍然有办法让你的行为之后。

下面的配置会给你想要的结果，但唯一的缺点是网格线仍超出轴线延伸的隐藏刻度标记（例如它看起来有点搞笑）。

var chartInstance = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
    scales: { 
     yAxes: [{ 
     ticks: { 
      stepSize: 1 
     }, 
     callback: function(value, index, values) { 
     if (value % 5 === 0) { 
      return value; 
     } else { 
      return ' '; 
     } 
     }, 
     }] 
    } 
    } 
}); 

这是一个通过codepen的实例。