Блог

Я использую high charts в angular 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 директиву для создания этого компонента для каждого элемента ваших данных.

К сожалению, я не знаком с angular-highcharts , поэтому я создал простую демонстрационную версию с highcharts-angular — официально поддерживаемой оболочкой Angular.

Живая демонстрация:
https://stackblitz.com/edit/highcharts-angular-sparkline-j3nujf?file=src/app/app.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>