时间戳

首页 > 解决方案 > chartjs - 如果值低于以前的值，如何使用不同的颜色？

javascript - chartjs - 如果值低于以前的值，如何使用不同的颜色？

问题描述

在我的网站上，我使用 chartjs 来构建漂亮的折线图（如此处的文档：https ://www.chartjs.org/docs/2.7.2/charts/line.html ）

我正在尝试找到一种以 2 色绘制折线图的解决方案，如果该值低于以前的值，则使用颜色 #2，因此如果我的值下降，您可以很快看到与之前的数据。

我正在探索不同的插件，但没有人在做我想要的。我发现最接近的是“财务图表”插件（https://www.abelheinsbroek.nl/financial/），但我希望我的图表是正常的折线图，而不是像那个插件那样的烛台样式。

有插件可以做到吗？

标签： javascriptchart.js

解决方案

您可以通过在 gradientStroke 上使用函数来赋予颜色以达到想要的结果。

基本上你可以在 Chart.js 中创建一条渐变线：

var ctx = document.getElementById('myChart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");

在上述情况下，您最终会得到从红色 (#80b6f4) 到蓝色 (#f49080) 的渐变，但您可以简单地将 1（点的位置）除以您拥有的点数。

例如，如果你有 5 分，你会这样做：

var ctx = document.getElementById('myChart').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.25, "#f49080");
gradientStroke.addColorStop(0.5, "#f49080");
gradientStroke.addColorStop(0.75, "#80b6f4");
gradientStroke.addColorStop(1, "#f49080");

创建一个函数并使用循环使您的解决方案具有可扩展性。

推荐阅读