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行？如果这是最好的方法。

在我的场景中，我希望迭代大约12个（可以变化的）潜在图表并在屏幕上显示它们。上述场景的限制是我需要在SimpleChartExample类中为我想要显示的每个图表声明一个options对象。

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>

如果您需要根据点击操作更新其他图表，只需使用observables捕获事件触发器。

在一页上以angular2动态创建的多个highcharts图表

2 个答案: