如何跳过 chart.js x 轴上的刻度间隔？

Question

我正在使用 Chart.js。 我想在图表上显示每三个刻度和 label。 使用下面的代码，我可以跳过每三个 label 而不是间隔/滴答声。

我想跳过/删除间隔。 是否可以在不修改输入数据的情况下跳过刻度和间隔？

我会非常感谢任何类型的输入/帮助？

 options: {
        scales: {
            xAxes: [{
               autoSkip: false,
                ticks: {
                    callback: function(tick, index, array) {
                        return (index % 3) ? "" : tick;
                    }
                }
            }],
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }

Answer 1

您可以定义脚本选项options.scales.x.grid.tickColor如下。 这将生成一个array ，该数组仅为每 3 条tick线指定一种颜色。

grid: {
  tickColor: labels.map((l, i) => i % 3 ? null : 'lightgray')
}

有关详细信息，请参阅 Chart.js 文档中的网格线配置。

请看一下下面的可运行代码，看看它是如何工作的。

 const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; const data = [65, 59, 80, 81, 56, 55, 40]; new Chart('myChart', { type: 'line', data: { labels: labels, datasets: [{ label: 'My Dataset', data: data, fill: false, borderColor: 'rgb(75, 192, 192)', tension: 0.1 }] }, options: { scales: { x: { autoSkip: false, grid: { tickColor: labels.map((l, i) => i % 3? null: 'lightgray') }, ticks: { callback: (t, i) => i % 3? '': labels[i] }, }, y: { beginAtZero: true } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <canvas id="myChart" height="80"></canvas>