angular 8中基于json生成多个图表答案

【问题标题】：Generate multiple charts based on json in angular 8angular 8中基于json生成多个图表
【发布时间】：2020-08-17 16:30:07
【问题描述】：

我在角度 8 中使用高图表。我正在获取对象数组中单个对象的图表，但我想动态获取每个对象的每个图表如何实现。下面我附上了我的工作 stackblitz 以供参考。

JSON：

[
   {
      "nameList":[
         {
            "id":203,
            "Namelist_constrains":{

            },
            "lists":[
               {
                  "name":"books",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"paper",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"pen",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"ball",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               },
               {
                  "name":"bat",
                  "data":{
                     "A15people":4285,
                     "A30people":4285,
                     "A90people":4285
                  }
               }
            ]
         },
         {
            "id":204,
            "Namelist_constrains":{

            },
            "lists":[
               {
                  "name":"books",
                  "data":{
                     "A15people":5004,
                     "A30people":345,
                     "A90people":1334
                  }
               },
               {
                  "name":"paper",
                  "data":{
                     "A15people":112,
                     "A30people":345,
                     "A90people":6667
                  }
               },
               {
                  "name":"pen",
                  "data":{
                     "A15people":9882,
                     "A30people":3456,
                     "A90people":29898
                  }
               },
               {
                  "name":"ball",
                  "data":{
                     "A15people":3465,
                     "A30people":224,
                     "A90people":455
                  }
               },
               {
                  "name":"bat",
                  "data":{
                     "A15people":876,
                     "A30people":234,
                     "A90people":664
                  }
               }
            ]
         }
      ]
   }
]

对于以上内容，我需要获得两个图表，因为它有两个对象。

在我的 stackblitz 中，json 中只有一个对象。我有点困惑如何实现这个。帮我解决这个问题。

链接：

https://stackblitz.com/edit/angular-highcharts-example-xqcnyv?file=src/app/app.component.ts

【问题讨论】：

您可以创建一个简单的组件，它将图表的数据作为Input 并返回独立图表。然后，您可以使用 *ngFor 指令为数据的每个元素生成该组件。

标签： highcharts angular8

【解决方案1】：

您可以创建一个简单的组件，它将图表的数据作为Input 并返回独立图表。然后，您可以使用 *ngFor 指令为数据的每个元素生成该组件。

不幸的是，我对angular-highcharts 不熟悉，所以我用highcharts-angular 创建了一个简单的演示——官方支持的Angular 包装器。

现场演示： https://stackblitz.com/edit/highcharts-angular-sparkline-j3nujf?file=src%2Fapp%2Fapp.component.html

数据：

  myData = [
    { data: [1, 2, 3], name: "first" },
    { data: [4, 5, 6], name: "second" },
    { data: [7, 8, 9], name: "third" }
  ];

app.component.html

<app-spark-line 
   *ngFor="let elem of myData" 
   [name]="elem.name" 
   [data]="elem.data"
></app-spark-line>

spark-line.component.ts：

export class SparkLineComponent {
  Highcharts: typeof Highcharts = Highcharts;
  @Input() data: Array<number>;
  @Input() name: string;
  updateFlag = false;
  chartOptions: Options = {
    chart: {
      type: "area",
      margin: [2, 0, 2, 0],
      width: 200,
      height: 200,
    },
    series: [
      {
        name: '',
        type: 'area',
        data: []
      }
    ] 
  };

  ngOnChanges(change: SimpleChanges) {
      this.chartOptions.series = [{
        name: change.name ? change.name.currentValue : null,
        type: 'area',
        data: change.data.currentValue,
      }];
      this.updateFlag = true;
    }
  }

sparkline.component.html：

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions" 
  [(update)]="updateFlag"
>
</highcharts-chart>

【讨论】：