Angular2: диаграмма High-Chart-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 я добавил HighchartsChartComponent из highcharts-angular .

Я убежден, что все сделалправо.Но почему-то мой график не показывает все это, согласно dev console, кажется, что в угловом компоненте 1x1 пиксель: (

Answer 1

Вы закрываете тег старшей диаграммы слишком рано.И ваша переменная параметров неверна, как упомянул Войцех.Это

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

Answer 2

Проверьте это:

• В вашем app.module.ts у вас должно быть import { HighchartsChartModule } from "highcharts-angular"; вместо HighchartsChartComponent.
• Это имя не являетсяправильно: my-chart и, возможно, причина проблемы.Вы должны изменить его и использовать следующие: myChart или my_chart

Демо:

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