使用nvd3库显示单个系列多条形图

Question

有谁知道如何将多条形图作为单个系列？在一个工作示例中,我已经看到了我希望我的图形看起来如何,这个函数被用于数据.

function dataFactory(seriesNum, perSeries) {
return new d3.range(0,seriesNum).map(function(d,i) { return {
key: 'Stream ' + i,
values: new d3.range(0,perSeries).map( function(f,j) {
  return { 
           y: 10 + Math.random()*100,
           x: j
         }
})
};  
});
}

下面是我正在使用的代码,我还会上传一张图片,这样你就可以看到我的标签处于关闭位置,因为它不是单个系列.

function loadBar(){ 
$.getJSON('data5.json', function (json) {
var data1 = [];
for (var key in json) {
    if (json.hasOwnProperty(key)) {
        var item = json[key];
        data1.push({
            key: item.key,
            values: item.values
        });            
    }
}

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
  .color(d3.scale.category10().range())
  .margin({bottom: 100})
  .transitionDuration(300)
  .delay(0)
  //.rotateLabels(45)
  ;

chart.multibar
  .hideable(true);

chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.2);

chart.xAxis
    .axisLabel("Players")
    .showMaxMin(false);

chart.yAxis
    .axisLabel('Hours Played')
    .tickFormat(d3.format('d'));

d3.select('#chart1 svg')
    .datum(data1)
   .call(chart);

nv.utils.windowResize(chart.update);

chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

return chart;
});
});
}

$(document).ready(function(){
loadBar();
});

data5.json(以防有人需要看到它)

{
"Member1": {
    "key":"test10",
    "values": [
        {
            "x": "test10",
            "y": 20
        }
    ]
},
"Member2":{
    "key":"test9",
    "values": [
        {
            "x": "test9",
            "y": 10
        }
    ]
},
"Member3":{
    "key":"test8",
    "values": [
        {
            "x": "test8",
            "y": 4
        }
    ]
},
"Member4":{
    "key":"test7",
    "values": [
        {
            "x": "test7",
            "y": 12
        }
    ]
},
"Member5":{
    "key":"test6",
    "values": [
        {
            "x": "test6",
            "y": 30
        }
    ]
},
"Member6":{
    "key":"test5",
    "values": [
        {
            "x": "test5",
            "y": 8
        }
    ]
}
,
"Member7":{
    "key":"test4",
    "values": [
        {
            "x": "test4",
            "y": 27
        }
    ]
},
"Member8":{
    "key":"test3",
    "values": [
        {
            "x": "test3",
            "y": 17
        }
    ]
},
"Member9":{
    "key":"test2",
    "values": [
        {
            "x": "test2",
            "y": 2
        }
    ]
},
"Member10":{
    "key":"test1",
    "values": [
        {
            "x": "test1",
            "y": 55
        }
    ]
}
![enter image description here][2]}

Answer 1

多条形图的预期数据格式是一个对象数组,每个对象代表一个数据系列.在每个系列对象中,应该有一个命名该系列的键属性,以及一个带有数据点的values数组.值数组应该具有每个条形的对象,具有分类x值和数字y值.

例如,如果我"字符串化"它们的数据生成函数的结果(在减少参数之后所以我只获得两个数据系列,每个数据系列有五个条),它看起来像这样:

[{
    "key": "Stream0",
    "values": [{
        "x": 0,
        "y": 0.16284738584101344
    }, {
        "x": 1,
        "y": 2.370283172738109
    }, {
        "x": 2,
        "y": 0.1631208266452718
    }, {
        "x": 3,
        "y": 0.24609871793543797
    }, {
        "x": 4,
        "y": 1.5096133160633776
    }]
}, {
    "key": "Stream1",
    "values": [{
        "x": 0,
        "y": 0.12566330679904006
    }, {
        "x": 1,
        "y": 0.1321859413211272
    }, {
        "x": 2,
        "y": 1.4798247902549135
    }, {
        "x": 3,
        "y": 0.10870538273358979
    }, {
        "x": 4,
        "y": 0.16155091711225184
    }]
}]

该图如下所示:

每个系列都以不同的颜色绘制.条形图根据其x值并排分组,或者您可以切换到堆叠.

您为每个类别获得一个窄条的原因是因为您有11个不同的数据系列,每个系列都有一个具有不同 x值的条形.因此,对于每个x值,图表为所有数据系列提供了并排绘制的空间,即使它没有数据.

您需要将所有条形图分组到一个数据系列中,通过x值标识测试,或者需要为它们提供相同的x值,并通过系列键识别测试.

根据离散条形图功能的另一个问题,我知道你已经有了第一个选项.

修改此代码以查看其他方式(11个系列,每个只有一个条)的最简单方法是告诉图表函数只使用x的常量值:

chart.x(function(d){return "test";})

有了它,和你的数据类似(许多系列,每个只有一个数据点),你会得到一个从条形图切换到堆积区域图表的图表,如下所示:

(PS,你当然希望删除数字格式化的tickFormat函数,这样你就不会像这些图片那样得到"NaN"!)