使用d3 Javascript库在折线图中更改日期时间X轴的格式和数据

Question

我必须使用D3和带有JavaScript的dimple库创建折线图。 Y轴表示日射强度计的测量值（例如：530），X轴表示该测量值的时刻（最后24小时）。 （例如：Tue Dec 31 17:40:00 CET 2013） 此图表是动态图表。我获取数据库的数据，每5分钟刷新一次图表。

我遇到了这个问题：X轴上的数据太多了，我不能在x轴上看任何东西。这是我的图表的图片：

我需要重新组织X轴的数据。我每隔4小时只需要打勾。 x轴必须是这样的：

所以，我必须改变X轴的格式，并且在过去24小时内每4小时只打一次。而且，我必须把这一天放在下面。

你知道我怎么能这样做？

这是我的图表代码：

var svg = dimple.newSvg("#container", 500, 500);
var myChart = new dimple.chart(svg, data2);
var x = myChart.addCategoryAxis("x", "time");
x.addOrderRule(Date);
var y1 = myChart.addMeasureAxis("y", "Piranometro");
var piranometro = myChart.addSeries("Piranom.", dimple.plot.line,[x,y1]);               
myChart.draw();

提前致谢

Answer 1

尝试使用

myChart.addTimeAxis()

而不是

myChart.addCategoryAxis()

这是一个高级时间轴示例（x和y都是时间轴）：

Advanced Time Axis Sample

addTimeAxis（）的文档：

Dimple addTimeAxis() function

相关问题：

Dimple Time Format Juggling

要显示小时轴以下的天数，您可以使用第二个时间轴。

希望这一切能帮助您找到符合您需求的解决方案。