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

Question

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

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

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

Answer 1

您可以尝试使用以下配置

     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', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                            display: true,
                            position: 'right',
                            id: 'y-axis-2',

                            // grid line settings
                            gridLines: {
                                drawOnChartArea: true, // only want the grid lines for one axis to show up
                            },
                        }],
                    }
                }
            };

Answer 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, 5, 8, 3, 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>

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

How to display grid lines (without showing label) between each ticks?

javascript

chart.js

linechart

react-chartjs