如何在高级图表包装器中使用添加系列和更新方法来获取角度?

问题描述

借助以下链接，我在我的angular5应用程序中使用了高级图表包装器.

I am using high chart wrapper in my angular5 app with the help of below link.

高级图表包装器

但是如何使用addSeries()将系列添加到现有图表中，以及如何更新现有图表的属性.

but how can I use addSeries() to add series into the existing chart and how can I update the properties of existing chart.

推荐答案

使用highcharts-angular包装器时，不建议直接在图表参考中使用像addSeries()或update()这样的图表方法.

When using highcharts-angular wrapper it is not recommended to use chart methods like addSeries() or update() directly on chart reference.

您必须更新整个组件，而不仅是图表属性.可以通过更新chartOptions对象(添加新系列，点，标题等)并设置updateFlag = true来实现.检查下面发布的代码和演示.

You have to update a whole component, not only chart properties. It can be achieved by updating chartOptions object (add new series, point, title etc) and setting updateFlag = true. Check the code and demo posted below.

app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HighchartsChartModule } from "highcharts-angular";
import { ChartComponent } from "./chart.component";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent, ChartComponent],
  imports: [BrowserModule, HighchartsChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

chart.component.html:

<div class="boxChart__container">
  <div>
    <highcharts-chart
      id="container"
      [Highcharts]="Highcharts"
      [constructorType]="chartConstructor"
      [options]="chartOptions"
      [callbackFunction]="chartCallback"
      [(update)]="updateFlag"
      [oneToOne]="true"
      style="width: 100%; height: 400px; display: block;"
    >
    </highcharts-chart>
    <button (click)="updateChart()">Update Chart</button>
  </div>
</div>

chart.component.ts:

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFlag = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    series: [
      {
        data: [1, 2, 3, 6, 9]
      }
    ],
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };

  constructor() {
    const self = this;

    this.chartCallback = chart => {
      // saving chart reference
      self.chart = chart;
    };
  }

  ngOnInit() {}

  updateChart() {
    const self = this,
      chart = this.chart;

    chart.showLoading();
    setTimeout(() => {
      chart.hideLoading();

      self.chartOptions.series = [
        {
          data: [10, 25, 15]
        },
        {
          data: [12, 15, 10]
        }
      ];

      self.chartOptions.title = {
        text: "Updated title!"
      };

      self.updateFlag = true;
    }, 2000);
  }
}

演示:

• https://codesandbox.io/s/oomo7424pz

文档参考:

• updateFlag- https://github.com/highcharts/highcharts-angular#options -详细信息

这篇关于如何在高级图表包装器中使用添加系列和更新方法来获取角度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！