Question

我正在构建一个带有图形的网页，该图形需要多个输入，并希望用红色/绿色/黄色填充某些行上方和下方的背景。我有数据集（注意，数据推送功能不是我的，我知道它的功能效率不高。）因此，在这里，下面的所有数组均具有相同的x坐标，但具有不同的y坐标。我希望LCL下的所有内容都是绿色，可以通过area：true实现，但是当我在UCL中添加area：true时，它将与绿色重叠以创建我不想要的颜色。如果可能，我还希望UCL上方的区域为黄色。我还添加了用于制作下表的nvd3图形函数。谢谢您的帮助。

for ( let i = 0, len=a.length; i<len; i++) {
     LCL.push({ x: a[i].EventDt*1000, y: 5.51 });
     UCL.push({ x: a[i].EventDt*1000, y: 6.50 });
     data.push({ x: a[i].EventDt*1000, y: a[i].cpw });

    }

        return [
        {
            key: 'LCL',
            color: '#98FB98',
            values: LCL,
            strokeWidth: 2,
            classed: 'dashed',
            area:true,

        },
        {
            key: 'UCL',
            color: 'Red',
            values: UCL,
            strokeWidth: 2,
            classed: 'dashed',
            area:true
        }
        ,
        {
            key: 'Avg. $/watt',
            color: '#4682b4',
            values: data,
            strokeWidth: 2,
        },
    ];
};

我已经尝试过使用svg区域轴，但是不确定是我的错误还是其他原因，但是那没有用。我感觉它与yscale有关，以获得正确的区域，但是我不确定，因为我是nvd3的新手并且不确定如何进行操作。编辑：还尝试了一些css解决方案，例如background-blend-mode之类的方法似乎也不起作用。

nv.addGraph(function () {
chart = nv.models.lineChart()
    .useInteractiveGuideline(true)
    .showLegend(true)
    .showYAxis(true)

chart.xAxis.tickFormat(function(d) { return d3.time.format('%x')(new Date(new Date(d).getTimezoneOffset() * 60000 + d)); });
chart.yAxis.tickFormat(function (d) { return '$' + d3.format(",.1f")(d)})
chart.tooltip.valueFormatter(function(d){return d3.format(",.1f")(d)});


var data = cpwLimits();

// Assign the SVG selction
chartData = d3.select('#cpw svg').datum(data);
chartData.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);

return chart;
});

NVD3折线图，重叠区域填充问题

0 个答案: