Несколько диаграмм высокоскоростных диаграмм, динамически созданных в угловом2 на одной странице

Question

Можно ли перебирать данные и создавать диаграмму для каждой итерации в угловом2?

Использование angular2-highcharts Чтобы создать диаграмму на странице и заполнить ее данными, я должен следовать нижеприведенной концепции.

import { Component } from 'angular2/core'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 

@Component({ 
    selector: 'simple-chart-example', 
    directives: [CHART_DIRECTIVES], 
    template: ` 
     <chart [options]="options"></chart> 
    ` 
}) 
export class SimpleChartExample { 
    constructor() { 
     this.options = { 
      title : { text : 'simple chart' }, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2], 
      }] 
     }; 
    } 
    options: Object; 
} 

Можно ли создать что-то, что будет Переберите данных и создать новую <chart [options]="options"></chart> HTML строку для каждого элемента данных? Если это даже лучший способ сделать это.

В моем сценарии я ищу итерацию примерно через двенадцать (может варьироваться) потенциальных диаграмм и отображение их на экране. Ограничением в приведенном выше сценарии является то, что мне нужно объявить объект опций в классе SimpleChartExample для каждой диаграммы, которую я хочу отобразить.

Answer 1

Попробуйте это,

import { Component } from 'angular2/core'; 
import { CHART_DIRECTIVES } from 'angular2-highcharts'; 

@Component({ 
    selector: 'simple-chart-example', 
    directives: [CHART_DIRECTIVES], 
    template: "give your template url" 
}) 
export class SimpleChartExample { 
    constructor() { 
     this.chart1 = { 
      title : { text : 'simple chart' }, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2], 
      }] 
     }; 
this.chart2 = { 
      title : { text : 'simple chart' }, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2], 
      }] 
     }; 
    } 
    chart1: Object; 
    chart2: Object; 
} 

и в HTML использовать этот

<chart [options]="chart1"></chart> 
<chart [options]="chart2"></chart> 

Answer 2

Вы можете использовать ссылки селекторов для отображения каждого компонента. Например, страница dashboard.html может выглядеть примерно так, как показано ниже, где каждый селектор ссылается на свой собственный компонент, check out this example.

<div id="chart1"> 
    <chart-one></chart-one> 
</div> 

<div id="chart2"> 
    <chart-two></chart-two> 
</div> 

И если вам нужно обновить другие графики в зависимости от действий щелчка, просто используйте наблюдаемые для захвата триггеров событий.