如何在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

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

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

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

Answer 2

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

  

'＃00FFFF'，'＃0FF'，'青色'都是设置颜色的有效方法

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

    [{
      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 3

添加

classed: "my-custom-approx-line"

配置特定行并添加样式：

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

Answer 4

从提交#becd772

开始

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