Question

我正在使用Dimple来绘制数据，其中Y轴上的日期，X轴上的时间（0-23）。现在我希望Y轴范围始终覆盖整整一个月，X轴覆盖整个24小时。

Dimple提供了overrideMin和overrideMax但是对于Time Axes我不知道如何指定值：https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.axis#overrideMin

我在http://jsfiddle.net/mfhrpy6e/

做了一个小例子

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    {'Date': '04-03-2013', 'Time': '13:05:01'},
    {'Date': '10-03-2013', 'Time': '12:45:52'},
    {'Date': '19-03-2013', 'Time': '05:08:21'},
    {'Date': '23-03-2013', 'Time': '21:55:01'},
];

var myChart = new dimple.chart(svg, data);
var x = myChart.addTimeAxis("x", "Time", "%H:%M:%S", "%H");
var y = myChart.addTimeAxis("y", "Date", "%d-%m-%Y", "%d-%m");
var s = myChart.addSeries(null, dimple.plot.bubble);
myChart.draw();

Answer 1

http://dimplejs.org/advanced_examples_viewer.html?id=advanced_time_axis这样做但是使用了一个hacky解决方法。

Dimple希望min / max在这里是D3的日期格式。似乎没有伴随的时间格式/对象。示例中的解决方法是将所有Times放在2000年1月1日的同一天，然后指定该日期的最短和最长时间。

首先将日期添加到每次：

data.forEach(function (d) {
    d["Time"] = "2000-01-01 " + d["Time"];
}, this);

然后指定min / max：

// 2000-01-01 does not work here, no idea
x.overrideMin = new Date("01/01/2000 00:00:00");
x.overrideMax = new Date("01/01/2000 23:59:59");

这是更新的小提琴：http://jsfiddle.net/mfhrpy6e/5/

这真的不是一个令人满意但非常丑陋的解决方案，所以我不会接受它作为我自己问题的答案。

Answer 2

您可以使用d3创建最大值和最小值的日期对象：

x.overrideMin = d3.time.format("%H:%M:%S").parse("00:00:00");
x.overrideMax = d3.time.format("%H:%M:%S").parse("23:59:59");

只有当您需要介绍几天时，才能从00:00:00到00:00:00进行黑客攻击，否则系统无法区分它们。

这里的小提琴简化了你的答案：

http://jsfiddle.net/mfhrpy6e/6/

如何在Dimple中覆盖时间轴的Minin / Max？

2 个答案: