如何在 nvd3 折线图中用自定义颜色填充区域？

Question

我正在使用 nvd3，但我不太了解它的样式（css 属性）来自定义它。我有一个折线图，上面有两条数据线。绘制线条的代码如下：

nv.addGraph(function() {
        chart = nv.models.lineChart();

        chart.margin({
            left : 100,
            bottom : 100
        }).useInteractiveGuideline(true).showLegend(true).duration(250);
        chart.xAxis.axisLabel("Date").tickFormat(function(d) {
            var date = new Date(d);
            return d3.time.format("%b-%e")(date);
        });
        chart.yAxis.axisLabel('').tickFormat(d3.format(',.2f'));

        chart.showXAxis(true);

        d3.select('#startupRiskLineChart').datum(
                prepareDataObj(val1_y, val1_x, val2_y, val1_x))
                .transition().call(chart);
        ;
        nv.utils.windowResize(chart.update);
        chart.dispatch.on('stateChange', function(e) {
            nv.log('New State:', JSON.stringify(e));
        });
        return chart;
    });

有什么办法可以让数据线下面的区域用浅一点的颜色填充吗？如果有任何帮助，我们将不胜感激。

Answer 1

chart.color(["red","yellow","blue"]);

'#00FFFF','#0FF','cyan' all are valid ways to set colors

另一种方式是在数据本身设置

    [{
      values:[{x:1,y:1},{x:2,y:4},{x:3,y:9},{x:4,y:16}],
      key: 'not a Sine Wave',
      color: '#ff7f0e'  //color - optional: choose your own line color.
    }]

我猜是重复的问题

Answer 2

要获得具有特定颜色填充区域的折线图：

将 area: true 添加到数据系列中，如 this example。
添加此 CSS：.nv-area { fill: red }

该区域的不透明度设置为 0.5，因此用红色填充它实际上会变成粉红色：

Answer 3

添加

classed: "my-custom-approx-line"

配置特定行并添加样式：

&.nv-area {
  fill-opacity: 0.2;
}

Answer 4

截至提交 #becd772

使用.nv-group{ fill-opacity: 1.0 !important; }填充与线条颜色相同的区域

如何在 nvd3 折线图中用自定义颜色填充区域？

How to fill area with custom color under line in nvd3 linechart ?

css

d3.js

nvd3.js