javascript - 如何忽略 Chart.js 中具有相同值的点

Question

我有一个使用 Chart.js 的图表，它工作正常，但我希望图表在 y 值相同时绘制一条直线。例如在下图中，我有一些数据，其中有数百个连续的 y 值 1。我想要的不是图表为每个连续的 y 值 1 渲染一个点，我想要一条直线。我已经阅读了所有选项的文档，但没有看到适合我需要的选项。有人有什么想法吗？

代码:

this.$EventsCountChart = new Chart(this.$EventsCountChart, {
                        type: 'line',
                        data: {
                            labels: timestamps,
                            datasets: [{
                                data: eventCounts,
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.2)',
                                    'rgba(54, 162, 235, 0.2)',
                                    'rgba(255, 206, 86, 0.2)',
                                    'rgba(75, 192, 192, 0.2)',
                                    'rgba(153, 102, 255, 0.2)',
                                    'rgba(255, 159, 64, 0.2)'
                                ],
                                borderColor: [
                                    'rgba(255,99,132,1)',
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(255, 206, 86, 1)',
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(153, 102, 255, 1)',
                                    'rgba(255, 159, 64, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            legend: {
                                display: false
                            },
                            scales: {
                                xAxes: [{
                                    scaleLabel: {
                                        display: false
                                    }
                                }],
                                yAxes: [{
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Event Count'
                                    },
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });

在此先感谢您的帮助

Answer 1

首先，使用以下函数来分解您的数据:

function factorData(data) {
   let _data = data.map((e, i, a) => {
      let prev = a[i - 1];
      let next = a[i + 1];
      if (e === prev && e === next) return '' + e;
      return e;
   }).map(e => typeof e === 'string' ? null : e);
   return _data;
}

然后，将数据集的 spanGaps 属性设置为 true，如下所示:

...
datasets: [{
         data: factorData(eventCounts),
         spanGaps: true
         ...

查看 working example .