ChartJs 中 X 轴的特定网格线

Question

有没有办法将单个网格线放置在特定的 X 轴值处？

我正在尝试制作类似下面链接的图片的东西：

我已经设置了构建它所需的一切，只剩下那条该死的网格线。

Answer 1

当然，您只需要为您想要过滤掉的所有网格线创建一个自定义回调并xAxes返回- 在图表中保留您需要的单个网格线。null

例如

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart we want to create
  type: 'line',

  // The data for our dataset
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [0, 10, 5, 2, 20, 30, 45]
    }]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true,
          callback: function(value, index, values) {
            // where 3 is the line index you want to display
            return (index == 3) ? "" : null;
          }
        }
      }]
    }
  }
});

工作示例： https: //jsfiddle.net/fraser/kuwh3nzs/