基于Y轴的NVD3 lineChart条件区域颜色

时间:2016-04-02 20:00:57

标签: javascript node.js colors nvd3.js

我正在尝试将正Y值填充为蓝色,将负值填充为红色。以下是我的图表:Image of Current Graph

我目前正在app.js中为我的数据集添加颜色:

if(displayData["VARIANCE"] >= 0){
    ctvar.push({
        x: Date.now(), y: displayData["VARIANCE"], color:"#0000ff"
    });
}else{
    ctvar.push({
        x: Date.now(), y: displayData["VARIANCE"], color:"#ff0000"
    });
}

数据集作为ctvv传递给我的jade模板文件,我在js中设置所有图形设置:

function myData() {
return [
    {
        key: "Cycle time Variance",
        values: ctvv,
        area: true
    }
];
}

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

chart.xAxis.axisLabel("Time").tickFormat(function(d) {
      return d3.time.format('%H:%M')(new Date(d));
  });
chart.lines.scatter.xScale(d3.time.scale());
chart.yAxis.axisLabel("Seconds").tickFormat(d3.format("d")).ticks(5);
chart.yDomain([-60,60]);
d3.select("svg").datum(myData()).transition().duration(0).call(chart);

nv.utils.windowResize(
        function() {
            chart.update();
        }
    );
return chart;
});

我尝试使用ctvv设置图表颜色,也使用简单的颜色数组。

0 个答案:

没有答案