如何使用chart.js创建长尾图

Question

我想创建一个这样的长尾图：

我正在考虑使用Chart.js - 线堆积区域来制作基本形状。但是如何用不同颜色创建内部区域？还是有更好的方法吗？

我的目的是为产品主页创建动画横幅。

Answer 1

根据我的经验，你必须创建一个插件，因为Chart.js并不知道折线图的功能，即你可以传递多种背景颜色，但它们似乎被忽略了。

更快或许更方便的选择是使用条形图，它允许您指定背景颜色以及对数刻度。

Answer 2

我发现我可以传递一个空值来创建与折线图相似的​​效果：

数据集：[{                     label：＆＃34; My First数据集＆＃34;，                     backgroundColor：window.chartColors.blue，                     borderColor：window.chartColors.blue，                     数据：[                       空值，                       2000年，                       1000，                       800，                       380，                       200，                       0，                     ]                     填充：是的，                 }，{                     label：＆＃34;我的第二个数据集＆＃34;，                     填充：是的，                     backgroundColor：window.chartColors.red，                     borderColor：window.chartColors.red，                     数据：[                       3000，                       2000年，                       0，                       0，                       0，                       0，                       0                     ]，