在 Chart.js 中使用 maxTicksLimit 选项时如何计算和显示间隔之间的总值

Question

我有一个动态图表，可能包含数百个数据集，在这种情况下，我需要减少元素数量以使其可读。我正在寻找解决方案，我在

maxTicksLimit

文档中找到了

Chart.js

选项来减少 x 轴上的标签数量，但现在我需要计算间隔之间的数据总数并在间隔的中心显示该值。但找不到任何东西。小提琴将标签显示为 0、15、30、45...以及数据集中的所有记录。但我需要显示 0 到 15、16 和 30 等之间的总计数...我如何使用

Chart.js

库本身来做到这一点？

var data = [];
var labels = [];
var quantity = 150;
for (var i = 0; i < quantity; i++) {
  var test = Math.floor((Math.random() * 100) + 1);
  data.push(test);
  labels.push(i);
}

new Chart(document.getElementById("chart"), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            data: data,
            borderColor: "#3e95cd",
            fill: false
        }]
    },
    options: {
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                ticks: {
                    maxTicksLimit: 10
                }
            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart" width="800" height="400" style="background: #202020"></canvas>

这也是小提琴：https://jsfiddle.net/vaxobasilidze/L0dbqnz8/

Answer 1

我发现如果我们想修改刻度线或标签，我们可以在轴配置中使用ticks.callback方法

参考：https://www.chartjs.org/docs/latest/axes/labelling.html

但是由于我们不想在标签中间，我们可以稍微调整一下

callback: function (value, index, values) {
  if (index % 2 === 0) {
    return value;
  }
  return "Total Count";
}

但它将 maxTicksLimit 减少了一半