根据Angular 8

问题描述

我正在用角度8中的高位图表。我正在获取对象数组中单个对象的图表，但是我想动态地获取每个对象的每个图表如何实现该目标。下面附上我的工作堆闪电弹，以供参考。

JSON：

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

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

以上，我需要获取两个图表，因为它有两个对象。

在我的闪电战中，我在json中只有一个对象。我有点困惑如何实现这一目标。帮助我解决这个问题。

链接：

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

解决方法

您可以创建一个简单的组件，该组件将以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],width: 200,height: 200,},series: [
      {
        name: '',type: 'area',data: []
      }
    ] 
  };

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

sparkline.component.html：

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

angular8 highcharts