グループ化されたマルチ棒グラフを生成するために nvd3 ライブラリを使用しています。これは私のデータセットです (JSON FORM)
[{"key":"Param 1","values":[{"y":2.0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":25.0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":0,"x":"2013-02-01"},{"y":0,"x":"2013-03-01"},{"y":0,"x":"2013-04-01"}]},{"key":"Param 2","values":[{"y":160.0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0.0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":4.0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0.0,"x":"2012-01-01"},{"y":45.0,"x":"2012-03-01"},{"y":9.0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":10.0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":30.0,"x":"2012-12-01"},{"y":0.0,"x":"2013-01-01"},{"y":58.0,"x":"2013-02-01"},{"y":52.0,"x":"2013-03-01"},{"y":36.0,"x":"2013-04-01"}]},{"key":"Param 3","values":[{"y":80.0,"x":"2010-04-01"},{"y":12.0,"x":"2010-10-01"},{"y":0.0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":2.0,"x":"2011-04-01"},{"y":0.0,"x":"2011-10-01"},{"y":0.0,"x":"2012-01-01"},{"y":33.0,"x":"2012-03-01"},{"y":16.0,"x":"2012-05-01"},{"y":20.0,"x":"2012-08-01"},{"y":0.0,"x":"2012-10-01"},{"y":150.0,"x":"2012-11-01"},{"y":65.0,"x":"2012-12-01"},{"y":0.0,"x":"2013-01-01"},{"y":44.0,"x":"2013-02-01"},{"y":116.0,"x":"2013-03-01"},{"y":24.0,"x":"2013-04-01"}]},{"key":"Param 4","values":[{"y":0,"x":"2010-04-01"},{"y":8.0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0.0,"x":"2011-10-01"},{"y":4.0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":0.0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":0,"x":"2013-02-01"},{"y":67.0,"x":"2013-03-01"},{"y":0,"x":"2013-04-01"}]},{"key":"Param 5","values":[{"y":0,"x":"2010-04-01"},{"y":0,"x":"2010-10-01"},{"y":0,"x":"2010-12-01"},{"y":15.0,"x":"2011-01-01"},{"y":0,"x":"2011-04-01"},{"y":0,"x":"2011-10-01"},{"y":0,"x":"2012-01-01"},{"y":0,"x":"2012-03-01"},{"y":0,"x":"2012-05-01"},{"y":0,"x":"2012-08-01"},{"y":0,"x":"2012-10-01"},{"y":0,"x":"2012-11-01"},{"y":0,"x":"2012-12-01"},{"y":0,"x":"2013-01-01"},{"y":250.0,"x":"2013-02-01"},{"y":120.0,"x":"2013-03-01"},{"y":100.0,"x":"2013-04-01"}]}]
そして、これは私が使用しているコードです:
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.barColor(d3.scale.category20().range());
chart.xAxis
.showMaxMin(true).tickFormat(function(d){return d3.time.format('%b-%y')(new Date(d));});
chart.yAxis
.tickFormat(d3.format(',1f'));
d3.select('#plot_container svg')
.datum(plot_data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
x 軸に表示されるラベルは、ライブラリ自体によって生成されます。データが利用可能な x 軸のすべての月が必要です。また、そのような月はすべて、時間的に線形ではなく、等間隔にする必要があります。
私はtickValues
役に立たないようなものを試しました。これはどのように行うべきですか?