时间戳

首页 > 解决方案 > Angular2：highcharts-angular 图表不呈现

javascript - Angular2：highcharts-angular 图表不呈现

问题描述

我使用highcharts-angular包装器在角度组件中使用highcharts 。

我的模板是：

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

但不知何故，它根本没有显示出来。在相应的 .ts 文件中：

import * as Highcharts from 'highcharts'

导入 highcharts（我当然是通过 npm 添加的），我在 .ts 文件中的图表看起来像

my-chart = {
   chart: {
     ...
   }
}

与 ... 是正确的 highcharts 图表。

在 app.module 中，我从highcharts-angular添加了HighchartsChartComponent。

我确信我做的一切都是正确的。但不知何故，我的图表并没有全部显示出来，根据开发控制台，角度分量似乎是 1x1 像素:(

标签： javascriptangulartypescripthighchartsrender

解决方案

您关闭 highchart 标记太快了。正如 Wojciech 所提到的，您的 options 变量是错误的。这个

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

需要是

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

推荐阅读