nvd3 折线图 - 通过 Y 值设置线的颜色

Question

我正在使用 nvd3 折线图，我希望在特定 y 值（假设 y=4）下的点为红色，高于此值的点为 nvd3 颜色（橙色等）。

怎样才能达到这种效果？

Answer 1

这可以通过向折线图数据的点添加颜色值来完成。

因此，不仅仅是 x 和 y 对象：

{...{"y": "0.05885", "x": "1692"}, {"y": "0.05906", "x": "1693"}...}

你必须添加一个颜色值：

{...{"y": "0.05885", "x": "1692", "color": "#ff0000"}, 
{"y": "0.05906", "x": "1693","color": "#ff0000"}...}.

然后可以像往常一样访问和更改它。 对于所需的数据点，您可以制作颜色，例如根据需要红色。

编辑：

如果这不起作用，我认为它不可能，很好。问题是，这条线本身是一条实际的线，并且是它的一个元素。如果您查看生成的 html 代码，您将看到它是一个元素。因此，线条只能具有单一颜色属性。您可以将其设置为渐变link。将颜色属性设置为例如stroke: linear-gradient(to right, red, blue);，当然需要时停止和开始，看看这个：link。

访问line元素的方式是在css中：

#graphid g.nv-series-0 path.nv-line { //0 is the series number
     #color:red; //old
     stroke: linear-gradient(to right, red , blue); //new
}