angular - 在一页上用 angular2 动态创建多个 highcharts 图表

Question

是否可以迭代数据并为 angular2 中的每次迭代创建图表？

使用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>