时间戳

首页 > 解决方案 > highcharts-angular 不渲染图表

javascript - highcharts-angular 不渲染图表

问题描述

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

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

我按照本教程使其工作，但它不工作。

所有 3 个图表都正确获得了选项，但图表没有呈现。

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

标签： javascriptangularhighcharts

解决方案

您的 html 中有错字，在您的hc-chart组件中：

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

注意角架的移动>。

这是更新的 StackBlitz。

推荐阅读