Chart.js -如何创建组堆叠图表条

8wigbo56 于 2023-06-22 发布在 Chart.js

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

我的原始数据集中有几个设备名称。还有用户在每个设备上有多少点。现在，我如何在设备的栏/列中显示与每个设备关联的用户数和点数？我完全是Chart.js的新手，任何帮助都将不胜感激。
控制台原始数据：

console.log(alldata)

(2) [{…}, {…}]
0: 
    device: "Laptop"
    values: Array(2)
    0: {amckinlay: '30'}
    1: {cvu: '150'}
1: device: "Phone"
    values: Array(1)
    0: {amckinlay: '100'}

图表数据集：

d1 = [
        {
            label: 'amckinlay',
            data: [30],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
        },
        {
            label: 'cvu',
            data: [150],
            backgroundColor: 'rgba(255, 99, 132, 0.6)',
        }
    ]
d2 =[
        {
            label: 'amckinlay',
            data: [30],
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
        }
    ]

var dataset = {
    labels: ['Laptop', 'Phone'],
    datasets: [d1,d2]
};

图表看起来像this

var alldata = data.data
var datasets = [];
var labels = [];

for (var i = 0; i < alldata.length; i++) {
    labels.push(alldata[i].device)
    for (var group in labels) {
        if (labels[group] === alldata[i].device) {
            console.log(alldata[i].values)
            // var val =alldata[i].values
        }
    }

datasets.push({
    label: [],
    data: alldata[i].values,
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    });
}

chart.js

来源：https://stackoverflow.com/questions/76451747/chart-js-how-to-create-group-stacked-chart-bars

1条答案

按热度按时间

kq0g1dla1#

总结如下：

x轴标签应为device。
1.数据集，其中每个项目的标签应该是类别，如“amckinlay”，“cvu”等。每个项目的数据包含根据device的值。
问题是你的数据values来自alldata，这是键值对，使得很难提取密钥。建议将其转换为以下形式：

{ "category": "amckinlay", "value": 100 }

var colorSettings = [
  {
    category: 'amckinlay',
    backgroundColor: 'rgba(75, 192, 192, 0.6)',
  },
  {
    category: 'cvu',
    backgroundColor: 'rgba(255, 99, 132, 0.6)',
  },
];

var labels = alldata.map((x) => x.device);
alldata = alldata
  .map((x) =>
    x.values.reduce((acc, cur) => {
      for (let k in cur) {
        acc.push({
          device: x.device,
          category: k,
          value: cur[k],
        });
      }

      return acc;
    }, [])
  )
  .flat();

var subLabels = [...new Set(alldata.map((x) => x.category))];

var datasets = subLabels.reduce((acc, cur) => {
  for (let device of labels) {
    var value =
      alldata.find((x) => x.device == device && x.category == cur)?.value ??
      0;

    var category = acc.find((x) => x.label == cur);
    if (category == null) {
      acc.push({
        label: cur,
        data: [value],
        backgroundColor: colorSettings.find((x) => x.category == cur)
          .backgroundColor,
      });
    } else {
      category.data.push(value);
    }
  }

  return acc;
}, []);

请注意，图表配置options应该具有Stacked bar chart documentation中提到的堆叠设置。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labels,
    datasets: datasets,
  },
  options: {
    responsive: true,
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
      },
    },
  },
});

Demo @ .NET Fiddle

赞(0）回复(0）举报 2023-06-22

我来回答

Chart.js -如何创建组堆叠图表条

1条答案

相关问题

热门标签

最新问答