如何使用 Highcharts 在 Angular 10 中使用带堆积柱形图的网格图

Question

我们如何使用 Highcharts 在 Angular 10 中创建网格图。

我找到了一个显示如何使用 javascript 创建网格图的资源。 http://jsfiddle.net/pranavmdesai/vd6w53sk/6/

在angular中，我使用的包是 npm 安装 angular-highcharts npm 安装 highcharts

所以，我们需要使用如下两个对象

Highcharts = Highcharts;
chartOptions = {};

但根据上述资源中提供的示例，我们需要将每个图表推送到数组中，并在 html 中为其分配一个容器，以便图表自行呈现。但是我们如何在 angular 10 中实现相同的功能，因为我们在 HTML

中分配了上面的对象如下

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

Answer 1

在下面的演示中，我从下面的文档中重新创建了官方演示。我为图表创建了一个单独的通用组件，然后在 App HTML 部分我创建了 table 并且为每个图表提供了名称和数据。这只是向您展示如何实现它的一个基本示例。

HTML中的图表元素：

<td>
    <app-trellis [name]="'Firs'" [data]="[1, 2, 3, 4]"></app-trellis>
</td>

文档： https://www.highcharts.com/docs/chart-and-series-types/bar-chart
演示： https://stackblitz.com/edit/highcharts-angular-trellis

How to use trellis chart with stacked column in Angular 10 using Highcharts