ChartJs 中 X 轴的特定网格线

Question

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

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

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

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/

Answer 2

我找到了一个可以在折线图中隐藏网格线的解决方案。

将 gridLines 颜色设置为与 div 的背景颜色相同。

var options = {
scales: {
    xAxes: [{
        gridLines: {
            color: "rgba(0, 0, 0, 0)",
        }
    }],
    yAxes: [{
        gridLines: {
            color: "rgba(0, 0, 0, 0)",
        }   
    }]
}

}

或使用

var options = {
scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
        gridLines: {
            display:false
        }   
    }]
}
}

Answer 3

网格中的color属性具有支持的 JS 函数，然后使用context可以为不同的网格线提供不同的 colors。 https://www.chartjs.org/docs/latest/samples/scale-options/grid.html