如何在每个刻度之间显示网格线不显示标签？

如何解决如何在每个刻度之间显示网格线不显示标签？

我使用 Chart.js 2 (React-chart-js 2) 来显示折线图。

有没有人提到在每个显示的标签之间保持垂直网格线？

似乎垂直网格线只显示在每个显示的标签上。

解决方法

您可以为此使用可编写脚本的选项，请参阅隐藏每隔一个标签的示例，如果需要，您可以调整它以隐藏更大的步骤。

示例：

var options = {
  type: 'line',data: {
    labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
        label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
      },{
        label: '# of Points',data: [7,11,8,7],borderWidth: 1
      }
    ]
  },options: {
    scales: {
      x: {
        ticks: {
          callback: function(val,index) {
            return index % 2 === 0 ? this.getLabelForValue(val) : '';
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx,options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.js"></script>
</body>

您可以尝试使用以下配置

     var config = {
                type: 'line',showDatapoints: true,legend: { position: 'top' },data: data,options: {
                    responsive: true,hoverMode: 'index',stacked: false,title: {
                        display: true,text: 'Chart Title'
                    },scales: {
                        yAxes: [{
                            type: 'linear',// only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,position: 'left',id: 'y-axis-1',},{
                            type: 'linear',position: 'right',id: 'y-axis-2',// grid line settings
                            gridLines: {
                                drawOnChartArea: true,// only want the grid lines for one axis to show up
                            },}],}
                }
            };