Question

我正在使用带有highcharts-angular包装器的Node 8，Angular 6中的Highcharts 6，并使用了动态定义的声明式设置。

在模板中按以下方式绘制图表：

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

其他函数句柄的分配，例如格式器和回调也已损坏。内联分配函数或作为成员分配相同的结果都没关系。

我唯一的提示是，如果我提前静态定义每个图表，函数句柄分配就可以正常工作，但这当然是不希望的，因为它是动态的！

关于如何解决的任何想法？如果我能克服这个问题，那真的很接近动态的设置。

下面是一个重现该问题的代码框：http://codesandbox.io/s/angular-mv59c

我期望在声明式创建中动态分配的功能可以正常工作。

谢谢！

Highcharts事件已损坏：类型错误无法读取未定义的属性“调用”

0 个答案: