Question

我正在使用nvd3创建一个历史条形图，它工作正常。我想对这些酒吧做两件事。

设置圆角边条而不是方形。
根据值显示条形颜色

对于第二种情况，我尝试了如下功能，但它不起作用。

function(d,i) {
 return d.y > 50? "red":"blue";
}

更新：这是我正在使用的数据。我只是试图根据值为条形着色。因此，如果数据值大于50，则应将条形颜色设置为红色。至于另一个问题，我只想用圆角设计它们。

data = [{
        "values" : [ 
        [ 1136005200000 , 17.0] , [ 1138683600000 , 12.0] , [ 1141102800000 , 12.0] , [ 1143781200000 , 14] , 
        [ 1146369600000 , 20] , [ 1149048000000 , 21] , [ 1151640000000 , 17] , [ 1154318400000 , 34] , [ 1156996800000 , 10] , 
        [ 1159588800000 , 8.0] , [ 1162270800000 , 38.0] , [ 1164862800000 , 38.0] , [ 1167541200000 , 35.0] , 
        [ 1170219600000 , 55.0] , [ 1172638800000 , 35.0] , [ 1175313600000 , 26.0] , [ 1177905600000 , 26.0] ,
        [ 1180584000000 , 26.0] , [ 1183176000000 , 25.0] , [ 1185854400000 , 25.0] , [ 1188532800000 , 25.0] , 
        [ 1191124800000 , 29.0] , [ 1193803200000 , 29.0] , [ 1196398800000 , 29.0] , [ 1199077200000 , 52.0] , 
        [ 1201755600000 , 22.0] , [ 1204261200000 , 22.0] , [ 1206936000000 , 22.0] , [ 1209528000000 , 22.0]
    }];

Answer 1

例如，此代码根据x值绘制不同的蓝色阴影，如果y值为零则绘制灰色：

d3.selectAll("rect.nv-bar").style("fill", function(d,i){
    var colorCode = "#1f77b4";
    var date = new Date(d.x * 1000);
    var hours = date.getUTCHours();
    if(hours < 6 || hours >= 18){
        colorCode = "#355880";
    }
    if(d.y === 0){
        colorCode = "grey";
    }         
    return colorCode;
});

如何在nvd3中设置历史条形图的样式

1 个答案: