gpt4 book ai didi

javascript - 堆叠条形图 "Time Line"使用 Ng2-Charts/ChartJs 的图表

转载 作者:行者123 更新时间:2023-11-29 20:48:45 25 4
gpt4 key购买 nike

我希望使用 Ng2-Charts(ChartJs 的 Angular 2 指令)创建以下图表。

Desired Chart

但是我对数据集的逻辑有困难。我研究过要找到类似的图表(使用 ng2-charts),但无济于事。

以下是关于图表的一些信息:每个公司和 3 个阶段(用红色、黄色和绿色表示),该值表示公司在给定阶段花费了多少天。

例如:公司 1 在第 1 阶段(绿色)度过了 27 天,在第 2 阶段(黄色)度过了 54 天,在第 3 阶段(绿色)度过了 2 天。

如何使用 ng2-charts 实现此图表?

最佳答案

很好的问题,但 ChartJS 似乎还不支持它。看看this issue更有趣this pull-request .

由于很多人都提出了一个开放的功能请求,因此也可以通过添加自定义函数来解决它,例如 here。但您不会找到直接使用 ng2-charts 的解决方案。

在你的情况下,我建议尝试使用这些分支并直接使用 Chart.js(没有 Angular 组件)或搜索另一个能够显示这些图表类型的库。

一个可行的 hacky 解决方案是为每个堆叠条添加 white padding,这里建议如何:https://github.com/chartjs/Chart.js/issues/2912#issuecomment-230468691

A 创建了一个 working stackblitz使用这个“解决方案”:

enter image description here

关于javascript - 堆叠条形图 "Time Line"使用 Ng2-Charts/ChartJs 的图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53050613/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com