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

【问题标题】：Generate a combo chart using ngx-charts使用 ngx-charts 生成组合图
【发布时间】：2019-03-21 22:23:40
【问题描述】：

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

但我看不懂这个例子。

【问题讨论】：

嗨，弗兰克！你有没有找到任何例子？我面临同样的问题：ngx 发布 10.0，我在官方网站上找不到代码示例。
@E.Evsevleev 我在使用这个图表包时发现了一些问题，我们公司决定迁移到 HighCharts。
我确实设法使用了组合图表，然后根据我们的需要进行了更新（多个条形图和更多功能）。我稍后会发布演示。
谢谢@E.Evsevleev，请让我更新。

标签： ngx-charts

【解决方案1】：

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

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

您的文件夹结构将如下所示：

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

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

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

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

您现在可以将模板中的自定义组合图表组件与选择器 <combo-chart-component> 一起使用

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

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

【讨论】：