Как использовать методы добавления серии и обновления в оболочке старшего графика для угловых? - PullRequest
Новая
       11

Как использовать методы добавления серии и обновления в оболочке старшего графика для угловых?

0 голосов
/ 30 января 2019

Я использую обертку с высокой диаграммой в своем приложении angular5 с помощью ссылки ниже.

Оболочка с высокой диаграммой

но как я могу использовать addSeries () длядобавить ряды в существующую диаграмму и как я могу обновить свойства существующей диаграммы.

Ответы [ 2 ]

0 голосов
/ 30 января 2019

как я могу использовать addSeries () для добавления серии в существующую диаграмму и как обновить свойства существующей диаграммы.

При использовании оболочки highcharts-angular это не рекомендуетсяиспользовать методы диаграммы, например addSeries() или update(), непосредственно в ссылках на диаграмму.

Необходимо обновить весь компонент, а не только свойства диаграммы.Это может быть достигнуто путем обновления объекта chartOptions (добавление новой серии, точки, заголовка и т. Д.) И установки updateFlag = true.Проверьте код и демоверсию, размещенную ниже.

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);
  }
}

Демонстрация:

Ссылка на документацию:

0 голосов
/ 30 января 2019

вот очень полезный ответ для обучения обновлению старшей диаграммы.

https://www.highcharts.com/demo/chart-update

объясняет метод chart.update 

 chart.update({
    chart: {
      inverted: false,
      polar: false
    },
    subtitle: {
      text: 'Plain'
    }
  });

Для добавлениясерии используется следующий метод 

chart.addSerie(serie,true);

флаг 'true' здесь эквивалентен chart.redraw();

ИЛИ 

var chart = new Highcharts.Chart(options);
chart.addSeries({                        
    name: array.name,
    data: array.value
});

Если вы собираетесь добавить несколько серийВы должны установить флаг перерисовки в false и затем вызвать перерисовку вручную, так как это будет намного быстрее. 

var chart = new Highcharts.Chart(options);
chart.addSeries({                        
    name: 'Bill',
    data: [1,2,4,6]
}, false);
chart.addSeries({                        
    name: 'John',
    data: [4,6,4,6]
}, false);
chart.redraw();

Для получения дополнительной информации и методов вы можете посетить официальную страницу API Highcharts:

https://api.highcharts.com/class-reference/Highcharts.Chart

При использовании оболочки angular-highcharts в качестве импорта {Chart} из 'angular-highcharts';

создайте диаграммы, как показано ниже 

  chart = new Chart({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Linechart'
    },
    credits: {
      enabled: false
    },
    series: [
      {
        name: 'Line 1',
        data: [1, 2, 3]
      }
    ]
  });

Теперь вы можете вызыватьвсе методы API на этом

...