同一组件中的不同Highcharts（Angular 5）

Question

我正在尝试使用 Angular 5 在同一组件中显示多个 highcharts。两个 highcharts 的数据将不同。作为 Angular 的新手，任何人都可以就如何继续在此处添加另一个 Highchart 提供见解。以下是打字稿和 HTML 文件。 谢谢

app.component.ts

import { Component, ElementRef, ViewChild } from '@angular/core';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Highcharts + Angular 5';

  @ViewChild('chartTarget') chartTarget: ElementRef;

  chart: Highcharts.ChartObject;

  ngAfterViewInit() {
    const options: Highcharts.Options = {
      chart: {
    type: 'column'
},
title: {
    text: 'Stacked column chart'
},
xAxis: {
    categories: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    min: 0,
    title: {
        text: 'Bitbucket Consumption in TBs'
    },
    stackLabels: {
        enabled: true,
        style: {
            fontWeight: 'bold',
        }
    }
},
legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
},
tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
    column: {
        stacking: 'normal',
        dataLabels: {
            enabled: true,
        }
    }
},
series: [{
    name: 'CTC',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'ASW',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'MQS',
    data: [3, 4, 4, 2, 5]
}]
};


this.chart = chart(this.chartTarget.nativeElement, options);
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<div>
  <button (click)="addSeries()">Add Series</button>
</div>
<div #chartTarget>
  chart target
</div>

我应该如何在这里添加另一个 div 以便在这里可以使用不同的 Highchart ？

编辑： 在这里，我尝试合并 Andrew 的建议，但由于某种原因，该视图仍然没有其他图表可见。 https://angular-5h9k9m.stackblitz.io

Answer 1

你可以添加一个新的 div，引用它等等。

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>

<div>
  <button (click)="addSeries()">Add Series</button>
</div>
<div #chartTarget>
  chart target
</div>
<div #chartTarget2>
  chart target
</div>

app.component.ts

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { chart } from 'highcharts';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'Highcharts + Angular 5';

  @ViewChild('chartTarget') chartTarget: ElementRef;
  @ViewChild('chartTarget2') chartTarget2: ElementRef;

  chart: Highcharts.ChartObject;
  chart2: Highcharts.ChartObject;

  ngAfterViewInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'column'
      },
      title: {
        text: 'Stacked column chart'
      },
      xAxis: {
        categories: ['Jan', 'Feb', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Bitbucket Consumption in TBs'
        },
        stackLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
          }
        }
      },
      legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
          }
        }
      },
      series: [{
        name: 'CTC',
        data: [5, 3, 4, 7, 2]
      }, {
        name: 'ASW',
        data: [2, 2, 3, 2, 1]
      }, {
        name: 'MQS',
        data: [3, 4, 4, 2, 5]
      }]
    };


    this.chart = chart(this.chartTarget.nativeElement, options);
    this.chart2 = chart(this.chartTarget2.nativeElement, options); // maybe use different options
  }
}