使用nvd3庫顯示單個系列多條形圖表

enter image description here 有誰知道我會如何將多條形圖製作成單個系列？在一個我已經看到我想要我的圖形看起來的工作示例中，該函數正在用於數據。使用nvd3庫顯示單個系列多條形圖表

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]}

來源

2014-01-20 DiamonW

用於多條形圖預期的數據格式是對象的陣列，其中的每一個表示數據系列。在每個系列對象中，應該有一個關鍵屬性命名該系列，以及一個包含數據點的值數組。 values數組應該有一個對象，每個bar都有一個分類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 
    }] 
}]

該圖如下所示：
NVD3 MultiBar Chart