Highcharts- Angular несколько графиков на одной странице разных модулей - PullRequest
Новая
       112

Highcharts- Angular несколько графиков на одной странице разных модулей

0 голосов
/ 24 апреля 2020

Я использую оболочку https://github.com/highcharts/highcharts-angular для загрузки старших графиков в моем приложении angular. У меня возникают проблемы, когда я пытаюсь загрузить несколько диаграмм с разными модулями Highcharts для каждого на одной странице.

У меня есть: - древовидная карта, импортирующая Treemap и HeatMap - диаграмма с пользовательскими событиями и модулями / запас для показа полос прокрутки

Я загружаю такие модули:

bar-chart.component. html: 

<highcharts-chart [Highcharts]="Highcharts" [options]="options" (chartInstance)="createInstance($event)"
  [runOutsideAngular]="true" [(update)]="updateFlag" style="width: 100%; height: 100%; display: block;">
</highcharts-chart>

bar-chart.component.ts: 

import * as Highcharts from 'highcharts';
import HCCustomEvents from 'highcharts-custom-events';
import HCStock from 'highcharts/modules/stock';
import HCNoData from 'highcharts/modules/no-data-to-display';

HCCustomEvents(Highcharts);
HCNoData(Highcharts);
HCStock(Highcharts);

export class BarChartComponent implements BaseChartComponent, OnChanges {
  Highcharts: typeof Highcharts = Highcharts;

treemap.component. html: 

<highcharts-chart [Highcharts]="Highcharts" (chartInstance)="createInstance($event)" [options]=" options"
  [runOutsideAngular]="true" [constructorType]="'chart'" [(update)]="updateFlag"
  style=" width: 100%; height: 100%; display: block;">
</highcharts-chart>

treemap.components.ts: 

import * as Highcharts from 'highcharts';
import noData from 'highcharts/modules/no-data-to-display';
import Treemap from 'highcharts/modules/treemap';
import HCHeatmap from 'highcharts/modules/heatmap';

noData(this.Highcharts);
Treemap(this.Highcharts);
HCHeatmap(this.Highcharts);

export class TreemapChartComponent implements BaseChartComponent, OnChanges {
  Highcharts: typeof Highcharts = Highcharts;
  ...

При загрузке одной диаграммы на страницу они работают нормально , но когда оба загружаются на одной странице, древовидная карта начинает вести себя странно: - развертка не всегда работает. - иногда ошибка консоли для древовидной карты, не указывающая некоторые параметры, которые используются в модуле гистограммы (???)

Я уверен, что это способ, которым я импортирую и определяю модули старших диаграмм. Я видел разные решения без оболочки angular, например, наличие переменной между тегами и связывание переменной с модулями, загруженными до этого момента, но есть ли другой способ сделать это с оболочкой Angular?

...