在chartjs中分配折线图数据

yws3nbqq 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(227)

我有一个包含对象的数组，我想为chartjs中的折线图创建一个数据集，但我得到的数据集是错误的，因此得到了两个折线图而不是一个。我在这里做错了什么？

const data = [{May 04: '', May 05: '1', May 06: ''}, {May 04: '2', May 05: '', May 06: ''}]

const chartData = {
          labels: ['May 04', 'May 05', 'May 06' ]
          datasets: getDataSet(data),
        };

const getDataSet = (data) => {
  const dataSet = [];

  dataSet.push({ label: 'Total' });
  data.forEach((v) => {
  dataSet.push({
    data: Object.values(v),
  });
})
  return dataSet;
};

chart.js

来源：https://stackoverflow.com/questions/72471665/assigning-line-chart-data-in-chartjs

1条答案

按热度按时间

7eumitmz1#

您的问题可以使用下列程式码来解决：

const data = [
  { 'May 04': '', 'May 05': '1', 'May 06': ''},
  { 'May 04': '2', 'May 05': '', 'May 06': ''}
];

const getDataSet = data => {  
  const dsData = [0, 0, 0];
  data.forEach(o => Object.values(o).forEach((v, i) => dsData[i]+= Number(v)));
  return { 
    label: 'Total', 
    data: dsData
  };
};

const chartData = {
  labels: ['May 04', 'May 05', 'May 06'],
  datasets: [getDataSet(data)]
};

console.log(chartData);

如果您的数据是动态的，则可以按以下方式进行：

const data = [
  { 'May 04': '', 'May 05': '1', 'May 06': '', 'May 07': '1' },
  { 'May 04': '2', 'May 05': '', 'May 06': '', 'May 07': '2' }
];

const getDataSet = data => {  
  const dsData = Object.keys(data[0]).fill(0);
  data.forEach(o => Object.values(o).forEach((v, i) => dsData[i]+= Number(v)));
  return { 
    label: 'Total', 
    data: dsData
  };
};

const chartData = {
  labels: Object.keys(data[0]),
  datasets: [getDataSet(data)]
};

console.log(chartData);

第一个

赞(0）回复(0）举报 2022-11-07

我来回答

在chartjs中分配折线图数据

1条答案

相关问题

热门标签

最新问答