highcharts-angular не рендеринг графика

Question

Я использую 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>

Answer 1

У вас есть опечатка в вашем 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.