Angular 9图表js多柱图

huangapple
go评论113阅读模式
英文:

Angular 9 chart js mutibar

问题

I implemented chart js in my angular 9 application. There expecting chart values not coming.

ngOnInit:

  1. ngOnInit(): void {
  3.     this.smdashboardservice.fetchSmDashboardData().subscribe(response => {
  5.             //let data = response.data
  6.             let data = [
  7.                     {"label":"Application","sublabel":"Nice","count":2},
  8.                     {"label":"Application","sublabel":"poor","count":1},
  9.                     {"label":"Channels","sublabel":"Quality","count":2},
  10.                     {"label":"Customer Care","sublabel":"support","count":2}
  11.             ]
  13.             this.barChartLabels = Object.keys(data);
  14.             this.barChartLabels.forEach(label => {
  15.                     this.barChartData[0].data.push(data[label]['count']);
  16.             });
  18.     })
  19. }

Current code giving chart
Angular 9图表js多柱图

But I am expecting like this

Angular 9图表js多柱图

Demo here

英文:

I implemented chart js in my angular 9 application. There expecting chart values not coming.

ngOnInit:

  1. ngOnInit(): void {
  3.         this.smdashboardservice.fetchSmDashboardData().subscribe(response=>{
  4.       
  5.                 //let data = response.data
  6.                 let data = [
  7.                         {"label":"Application","sublabel":"Nice","count":2},
  8.                         {"label":"Application","sublabel":"poor","count":1},
  9.                         {"label":"Channels","sublabel":"Quality","count":2},
  10.                         {"label":"Customer Care","sublabel":"support","count":2}
  11.                 ]
  12.              
  13.                 this.barChartLabels = Object.keys(data);
  14.                 this.barChartLabels.forEach(label => {
  15.                         this.barChartData[0].data.push(data[label]['count']);
  16.                 });
  17.       
  18.         })
  19. }

Current code giving chart
Angular 9图表js多柱图

But I am expecting like this

Angular 9图表js多柱图

Demo here

答案1

得分: 1

需要准备对sublabel进行分类的数据集。

每个数据集应包含x轴类别（label）长度为3的值。

  1. let labels = [...new Set(data.map((x) => x.label))];
  2. let subLabels = [...new Set(data.map((x) => x.sublabel))];
  3. let subLabelDatasets = subLabels.map((x) => {
  4.   let datasets = [];
  6.   for (let label of labels) {
  7.     datasets.push(
  8.       data.find((y) => y.label == label && y.sublabel == x)?.count || 0
  9.     );
  10.   }
  12.   return {
  13.     label: x,
  14.     data: datasets,
  15.   };
  16. });
  18. this.barChartLabels = labels;
  19. this.barChartData = subLabelDatasets;

在StackBlitz上查看演示

另一种方式：subLabelDatasets 可以简化为：

  1. let subLabelDatasets = subLabels.map((x) => ({
  2.   label: x,
  3.   data: labels.map(
  4.     (label) =>
  5.       data.find((y) => y.label == label && y.sublabel == x)?.count || 0
  6.   )
  7. }));
英文:

You need to prepare the datasets which categorize the sublabel.

Each dataset should contain the values with the length of x-axis category (label), which is 3.

  1. let labels = [...new Set(data.map((x) => x.label))];
  2. let subLabels = [...new Set(data.map((x) => x.sublabel))];
  3. let subLabelDatasets = subLabels.map((x) => {
  4.   let datasets = [];
  6.   for (let label of labels) {
  7.     datasets.push(
  8.       data.find((y) => y.label == label && y.sublabel == x)?.count || 0
  9.     );
  10.   }
  12.   return {
  13.     label: x,
  14.     data: datasets,
  15.   };
  16. });
  18. this.barChartLabels = labels;
  19. this.barChartData = subLabelDatasets;

Demo @ StackBlitz

Alternative: subLabelDatasets can be simplified as:

  1. let subLabelDatasets = subLabels.map((x) => ({
  2.   label: x,
  3.   data: labels.map(
  4.     (label) =>
  5.       data.find((y) => y.label == label && y.sublabel == x)?.count || 0
  6.   )
  7. }));

huangapple
  • 本文由 发表于 2023年5月6日 20:43:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76188955.html
  • angular
  • chart.js
  • charts
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定