Angular2：highcharts-angular图表无法呈现

Question

我使用了 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'

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

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

...是正确的高位图表。

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

我坚信我做对了所有事情。 但是以某种方式，我的图表无法完全显示出来，根据开发者控制台的说法，它的角度分量似乎是1x1像素：（

Answer 1

检查：

• 在您的 app.module.ts 中，您应该使用svg而不是SELECT d.personal_id, COUNT (d.deliveryID) as Deliveries_7D, COUNT (d.deliveryID) as Deliveries_45D FROM table_d d WHERE d.delivered < d.created + 7 * interval '1 day' GROUP BY d.personal_id LIMIT 20 。
• 此名称不正确：import { HighchartsChartModule } from "highcharts-angular";，可能导致了问题。您应该更改它并使用以下内容：HighchartsChartComponent或my-chart

演示：

• https://codesandbox.io/s/54lyn5rvyp

Answer 2

您太早关闭了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>