Question

我正在尝试更改nvd3折线图here的不同行的颜色，但我无法理解如何执行此操作。我想将示例中2行的颜色更改为绿色和青色。我试过了

nv.addGraph(function() {
   var chart = nv.models.lineChart()
      .useInteractiveGuideline(true)
      .color(["rgb(0,255,0)","rgb(255,165,0)"]);
}

适用于散点图here。但是折线图的颜色没有变化。任何建议。

由于

Answer 1

你可以用它！

return [
    {
      values: data,      //values - represents the array of {x,y} data points
      key: 'Money', //key  - the name of the series.
      color: '#33ccff'  //color - optional: choose your own line color.
    }
  ];

Answer 2

在你的CSS中：

.nv-group.nv-series-0 {
    stroke-opacity: 1; 
    fill-opacity: 0.5; 
    fill: red; 
    stroke: red;
}

例如，这会将第一行的颜色更改为红色。使用.nv-group.nv-series-1作为第二行，依此类推......

nvd3.js - 无法更改折线图中的线条颜色

2 个答案: