Я использую Highcharts 6 в Node 8, Angular 6 с оболочкой highcharts-angular, и использую динамически определенную декларативную настройку.
Диаграммы отображаются следующим образом в шаблоне:
<highcharts-chart *ngFor="let chart of chartUtilities.charts; let i = index"
[Highcharts]="chartUtilities.Highcharts"
[constructorType]="'chart'"
[options]="chartUtilities.charts[i].hcOptions"
[callbackFunction]="chartUtilities.charts[i].hcCallback"
[(update)]="chartUtilities.updateTrend"
class="chart"
id="trendChart{{i}}"
></highcharts-chart>
chartUtilities - это служба, которая содержит декларативный шаблон и функции, которые динамически обновляют объявленные объекты во время выполнения.
Когда диаграмма обновляется, управляющий код в компоненте копирует шаблон, n раз, что приводит к визуализации n-диаграмм. Затем компонент вызывает сервисную функцию для рисования серии и обновления параметров.
//Create new charts based on the template
let new_charts = [];
for (let _i=0; _i<=num_items-1; _i++) {
let this_copy = JSON.parse(JSON.stringify(this.chartUtilities.chartTemplate));
new_charts.push(this_copy);
}
this.chartUtilities.charts = new_charts;
this.chartSelected(builds data arrays, then calls service function to update template options and assign data arrays)
В основном, все это прекрасно работает. Я также могу использовать динамические темы как наблюдаемые, что приятно.
Единственная часть, которую я не могу понять, это как заставить события и пользовательские функции работать должным образом. В настоящее время, когда я назначаю обратный вызов событий, например, настраиваемую кнопку для полноэкранного режима, при щелчке я получаю сообщение об ошибке во время выполнения, например:
exporting: { buttons: { customButton: { text: null, symbol: 'square', onclick: this.toggleFullScreenTrend } } },
Ошибка времени выполнения:
core.js:1673 ERROR TypeError: Cannot read property 'call' of undefined
at SVGGElement.__zone_symbol__ON_PROPERTYclick (highcharts.js:75)
at SVGGElement.wrapFn (zone.js:1332)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:3811)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
at invokeTask (zone.js:1744)
at SVGGElement.globalZoneAwareCallback (zone.js:1770)
Другая функцияобрабатывать назначения, такие как форматеры и обратные вызовы, также не работает. Не имеет значения, если я назначу функцию inline или как член, тот же результат.
Единственный совет, который я имею, заключается в том, что, если я статически определяю каждую или любые диаграммы заранее, назначения дескриптора функции работаютправильно, но это, конечно, нежелательно, поскольку динамический!
Есть идеи как исправить? Очень близко к очень приятной динамической настройке, если я смогу обойти это.
Вот код и окно, которое воспроизводит проблему: http://codesandbox.io/s/angular-mv59c
Я ожидал динамически назначаемых функций при декларативном создании дляработать правильно.
Спасибо!