根据json in angular生成多个图表 8

Question

我在 angular 中使用高级图表 8.I 正在获取对象数组中单个对象的图表，但我想动态获取每个对象的每个图表如何实现。下面我附上了我的工作 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 中只有一个对象。我有点困惑如何实现 this.help 我来解决这个问题。

Link:

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

Answer 1

您可以创建一个简单的组件来获取图表数据，因为它是 Input 和 return 独立图表。然后，您可以使用 *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>

根据json in angular生成多个图表 8

Generate multiple charts based on json in angular 8

highcharts

angular8