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