使用ngx-charts生成组合图表

Question

我需要Stacked Bar Char和Line Bar Chart之间的组合图表，你能帮我一些例子。 我正在读这个文档： 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