将ChartJS中类似小时数的数据合并到一个条形图中

pqwbnv8z  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(156)

我正在使用Chartjs库在 Jmeter 板上显示一些统计信息。
我的数据是以这种方式分发的:

let chart = new Chart(document.getElementById('peh-bar-chart').getContext('2d'), {
          type: 'bar',
          data: {
              datasets: [{
                  label: '# of Votes',
                  data: [
                    {x: '2022-10-03T07:43:00', y: 1},
                    {x: '2022-10-03T07:50:00', y: 1},
                    {x: '2022-10-03T08:30:00', y: 1},
                    {x: '2022-10-03T08:10:00', y: 1},
                    {x: '2022-10-03T09:15:30', y: 1},
                    {x: '2022-10-03T09:30:00', y: 1},
                    {x: '2022-10-03T10:05:00', y: 1},
                    {x: '2022-10-03T10:10:00', y: 1},
                    {x: '2022-10-03T10:45:00', y: 1},
                    {x: '2022-10-03T15:15:00', y: 1},
                  ],
                  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: {
            scales: {
              xAxes: [{
                type: 'time',
                time: {
                    unit: 'hour',
                },
              }]
            }
          }
      });

我想让Chartjs将我的数据合并到一个条形图中,在其中找到相似的小时数。
例如,对于以下数据点,它应该创建一个在悬停时显示为2的条形图,在x轴上,条形图应该出现在上午7点。

{x: '2022-10-03T07:43:00', y: 1},
{x: '2022-10-03T07:50:00', y: 1}
e0uiprwp

e0uiprwp1#

您可以使用Array.reduce来缩减data,如下所示。

const reducedData = data.reduce((acc, curr) => {
  curr.x = curr.x.substring(0, 13);
  const retained = acc.find(o => o.x == curr.x);
  if (retained) {
    retained.y += curr.y;
  } else {
    acc.push(curr);
  }
  return acc;
}, []);

请看一下下面修改后的可运行代码,看看它是如何工作的。
第一个

相关问题