ngx-charts - 使用 ngx-charts 生成组合图表

Question

我需要一个堆叠条形图和折线条形图之间的组合图，你能帮我举个例子吗？我正在阅读此文档:Demo for combo charts

但是我无法理解这个例子。

Answer 1

对于在搜索包含组合图表的方法时偶然看到这篇文章的任何人，这些是使用来自 ngx-charts GitHub 的演示的主要步骤。

1. 复制 ngx-charts 存储库中 demo 文件夹下的 combo-chart 组件中的所有 4 个组件

   • 您的文件夹结构如下所示:

   combo-chart
    └─ combo-chart.component.scss
    └─ combo-chart.component.ts
    └─ combo-series-vertical.component.ts
    └─ index.ts
   

2. 将 2 个 component.ts 文件中的导入从相对链接更改为“@swimlane/ngx-charts”

   • 来自 '../../src'至 '@swimlane/ngx-charts'

   • 来自 '../../src/common/label.helper'至 '@swimlane/ngx-charts'

3. 导入组件并在您的 module.ts 文件中声明它们

   .
   import { ComboChartComponent, ComboSeriesVerticalComponent } from './combo-chart';
   .
   .
   declarations: [
   .
   .
   ComboChartComponent, ComboSeriesVerticalComponent],
   .
   

4. 您现在可以在模板中使用带有选择器的自定义组合图表组件 <combo-chart-component>

我创建了一个简单的要点来详细介绍整个过程，请查看 - https://gist.github.com/gabrielloye/67921cda6139ba1806920da2a7e2fcb2

工作示例的 StackBlitz 链接: https://stackblitz.com/edit/ngx-charts-combo-chart