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

Question

我需要堆积条形图和折线图之间的组合图，你能帮我举个例子吗？我正在阅读此文档： 组合图表演示

但我无法理解这个例子。

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