我使用的是带有焦点图的nvd3线的一个非常简单的示例。myData
从我的php文件返回一个JSON对象,其x坐标是0-23之间的数字。我想知道如何以小时格式设置x轴的格式。
d3.json('get_data.php', function (error, myData) {
// Renders a line chart
(function () {
nv.addGraph(function () {
var chart = nv.models.lineWithFocusChart();
chart.xAxis
.tickFormat(d3.format(''));
chart.yAxis
.tickFormat(d3.format(''));
chart.y2Axis
.tickFormat(d3.format(''));
d3.select("#chart svg")
.datum(myData)
.transition().duration(500)
.call(chart); //Define transition and pass the d3.selection to our lineChart.
nv.utils.windowResize(chart.update);
return chart; //Must return the enclosed chart variable so the global rendering queue can store it.
//});
});
})(); });
这是中的示例json数据myData
。无论如何我都需要操纵它吗?
[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }]
任何帮助表示赞赏。
经过大量搜索后,它可以与此代码一起使用。
chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());
var tickMultiFormat = d3.time.format.multi([ ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour ["%-I%p", function(d) { return d.getHours(); }], // not midnight ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st ["%Y", function() { return true; }] ]);
chart.xAxis.tickFormat(function (d) { return tickMultiFormat(new Date(d)); });
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句