0
私は直接チャートに表示し、X軸との間のいくつかの範囲がnvd3 Mutibarチャートのカスタマイズ変更Xに、Yキー名
var data =[
{"key":"Data 0","values":[{ x: "1996-05-22" , y: 1 },{ x: "1997-06-23" , y: 5 }]}
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.multibar.stacked(false);
chart.showControls(true);
chart.showLegend(true);
chart.reduceXTicks(false);
//chart.xAxis .tickFormat(function(d) { return d3.time.format("%Y-%m-%d").parse(d) });
chart.xAxis.rotateLabels(-90);
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
console.log(JSON.stringify(data));
return chart;
});
日付を作るために私のJSONデータを使用できるように、私はデータでXとYキー名を変更できます
私のサンプルチャート:http://jsfiddle.net/gxc27jav/29/
マイ要件
- 1:変更X「日付」とYデータのカウントなどと チャートでそれを使用することができますするための鍵
- 2:ティック値の範囲をリアルタイムの日付にします。現在のところ、 のデータはすべてDATAに表示されます。 chart.reduceXTicks(true); は範囲を均一にしません。
はD3 JSとnvd3の最新バージョンを使用してくださいました。例はhttp://nvd3-community.github.io/nvd3/examples/site.htmlにあります。 ドキュメントhttp://nvd3-community.github.io/nvd3/examples/documentation.html#discreteBarChart – bgth