我可以更改数据中的 X 和 Y 键名,以便我可以直接使用我的 JSON 数据在图表中查看并在 x 轴日期之间设置一些范围
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;
});
我的示例图表:http://jsfiddle.net/gxc27jav/29/
我的要求
- 1:将X键更改为"日期",将Y更改为DATA中的计数,并且可以在图表
- 2:使刻度值范围为实时日期。目前它只是在数据中显示所有可用的日期。 chart.reduceXTicks(true(;不会使范围均匀。
我找到了这两个问题的答案
nv.addGraph(function () {
var chart = nv.models.multiBarChart()
.x(function (d) {
return d.Date // to show Date propery on X axis
})
.y(function (d) {
return d.y
});
chart.multibar.stacked(false);
chart.showControls(false);
chart.showLegend(true);
chart.reduceXTicks(false);
chart.yAxis
.tickFormat(d3.format('d'));
chart.margin({
bottom: 70
});
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g');
xTicks
.selectAll('text')
.attr('transform', function (d, i, j) {
return 'translate (-10, 35) rotate(-90 0,0)'
}); //to adjsut the rotated axis Margins
nv.utils.windowResize(chart.update);
// console.log(JSON.stringify(data));
return chart;
}