Angular Highcharts - Как динамически клонировать диаграмму

Question

Я локально использую следующие зависимости highcharts:

• "angular-highcharts": "latest"
• "highcharts": "latest"
• "@types / highcharts ":" latest "

Вот живое демо моего исходного кода,

Я широко использую angular-highcharts в моем угловом 5приложение.Во многих случаях необходимо расширять диаграмму (когда на диаграмме видно много точек данных), чтобы учесть такие случаи, хотя я и создавал общий компонент.

Этот компонент с именем chart-widget отображаетдиаграмма в загрузочной карточке с возможностью развернуть диаграмму, на развернутой же диаграмма открывается в модальном режиме.Этот общий компонент позаботится обо всей логике, необходимой для открытия любого графика в модальном режиме (который можно перетаскивать и изменять размер).Таким образом, нам не нужно каждый раз дублировать одну и ту же функциональность.

Я создал общий компонент, и все работало нормально, но недавно мы обновили наши репо-зависимости, так как в версии highcharts были некоторые другие проблемыМы использовали, эти проблемы были исправлены в последней версии highCharts, поэтому мы решили, что лучше всего перейти на последнюю версию.С тех пор эта функциональность перестала работать.

Следуя логике, используемой для клонирования chartConfig во время модального открытия.Затем клонированный конфиг был передан на расширенную диаграмму, которая находится внутри модальной зоны.Но теперь расширенная диаграмма теперь всегда пуста.

this.expandChartConfig = new Chart(Object.assign({}, this.chartConfig.options));

, где chartConfig - это обычная конфигурация, используемая для визуализации диаграммы,

и expandChartConfig - это объект диаграммы, переданный модалу.

После обновления я понял, что свойство chartConfig.options теперь стало приватным, поэтому я также попытался:

this.expandChartConfig = new Chart(Object.assign({}, this.chartConfig.ref.options));

но это тоже не сработало.

Изначально я использовал одну и ту же конфигурацию для обеих диаграмм, но это приводило к проблемам, связанным с закрытием модального режима. HighChart также был уничтожен.Поэтому я решил, что создание отдельного конфига во время открытия модального графика для диаграммы внутри модального режима было лучшим вариантом.

Так что теперь, проще говоря, мой вопрос как я могу клонировать существующий график динамически.

• Эта функциональность требуется в десятках мест, поэтому я не могу поддерживать отдельные объекты диаграммы в каждом отдельном месте.

• Также есть многоопераций, выполняемых на графиках, таких как setData, setCategories, addSeries, removeSeries, update и т. д., поэтому не рекомендуется сохранять копии и обновлять их при каждой операции.Также эти операции будут выполняться родительским компонентом, поэтому ChartWidgetComponent не может знать о таких изменениях, когда они выполняются.

Итак, вкратце, как я могу динамически клонировать существующую верхнюю диаграмму итакже какой метод лучше?

Ps Я пробовал несколько методов, упомянутых в stackOverflow, но ни один из них, похоже, не работает.

Answer 1

Для достижения ожидаемого эффекта, к сожалению, недостаточно скопировать chart.options и передать его новому, если ранее вы не определили данные серии (изначально).В этом случае вам нужно получить свои данные (из ответа) и назначить их новой переменной компонента, затем передать их виджету и обновить серию.Вот инструкции, как это сделать:

Добавить новое поле в компоненте:

export class AppComponent {
  chartConfig: Chart;
  chartData: Object;
...

Назначить ответ для созданного поля:

private setChartData(chartData) {
  const options = this.chartConfig.ref.options;
  if (chartData.categories.length === 0) {
    options.lang.noData = `no data from: ${chartData.customMsgFromDate} to ${chartData.customMsgEndDate}.`;
  } else {
    options.lang.noData = 'No data to display';
  }
this.chartData = chartData;

Передать данныена виджет:

<app-chart-widget [chartConfig]="chartConfig" chartLabel="Title" [chartData]="chartData"></app-chart-widget>

Добавьте данные каждой серии к новым параметрам диаграммы:

onExpandChart(content): void {
  this.expandChartConfig = new Chart(this.chartConfig.ref.options);
  // Clone series data
  this.expandChartConfig.options.series.forEach((s, i) => {
    let name = s.name.toLowerCase()
    s.data = this.chartData[name]
  })

  this.modalService.open(content, { size: 'xl' as 'lg' });
  setTimeout(() => {
    this.resizeChart();
  ...

Пример в реальном времени: https://stackblitz.com/edit/highcharts-cloning-chart-bo3tfp

С уважением!

Answer 2

Я также использую Highcharts, я определяю диаграмму как компонент многократного использования, когда я хочу нарисовать другую диаграмму, я просто передаю значения через Input() decorattor

, в этом случае вы можете использоватьпримерно так:

Компонент диаграммы ts

@Component ({
    selector: 'char-component'
    ...
})
export class CharComponent {
  Input() options: any; 
} 

Реализация многократно используемого компонента

<char-component [options]="firstObject"></char-component>
<char-component [options]="secondObject"></char-component>

Компонентдля повторного кодирования

export clas Sample implements OnInit {
  ngOninit(){
     firstObject = {...} //Already defined
     secondObject = Object.assign(this.firstObject); //create a copy of this object

  }
}

примечание: если вы не знаете, сколько всего диаграмм, вы можете использовать массив с объектами options и нарисовать в шаблоне, если вам нужен еще один, простовставить его в массив

<char-component *ngfor="option of options" [options]="option "></char-component>