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。

Answer 2

改善ɢʀᴜɴᴛ的答案

将性能提高2倍：

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

（不是第二次迭代数组）

也别忘了！

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

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

2 个答案: