javascript - highchars-Angular 不渲染图表

Question

我正在使用 Angular 7、highcharts 和 highcharts-angular 渲染 3 个圆环图。但是，由于某种原因，它们没有呈现。

这是一个stackblitz来演示这个问题。

我关注了这个tutorial让它工作，但它不起作用。

所有 3 个图表都正确获取选项，但图表未呈现。

<div id="chart{{chartIndex}}">
<highcharts-chart>
  [Highcharts] = "highcharts" 
  [options] = "options"
  style = "width: 100%; height: 100%; display: block;"
</highcharts-chart>
</div>

Answer 1

您的 hc-chart 组件中的 html 有拼写错误:

<highcharts-chart>
  [Highcharts] = "highcharts" 
  [options] = "options"
  style = "width: 100%; height: 100%; display: block;"
</highcharts-chart>

您的选项不会传递到 highcharts-chart 组件。

将代码更改为:

<highcharts-chart
  [Highcharts] = "highcharts" 
  [options] = "options"
  style = "width: 100%; height: 100%; display: block;">
</highcharts-chart>
</div>

注意尖括号>的移动。

Here是更新后的 StackBlitz。