类别轴 - 刻度格式

时间:2014-02-05 18:22:52

标签: dimple.js

我有一个案例,图表上显示的数据是在工作时间内的五分钟间隔内收集的,而在晚上则保持闲置状态。当图表显示几天的数据时,天数(夜间)之间显然存在平坦的线条。

使用类别轴可以解决夜间长时间稳定线条的问题。但是使用时间轴我能够格式化日期和使用时间间隔属性。

如何使用类别轴执行此操作?我的意思是格式化刻度标签并实现与使用时间间隔类似的行为?

这就是目前使用类别轴的样子:

chart

我想每天只提供一个标记,格式正确。

提前感谢您的帮助。

1 个答案:

答案 0 :(得分:4)

你可以通过使用一个分组的类别轴来实现这一点,它将涉及一些操作你的日期到一个单独的时间部分和日期部分使用这样的代码:

// Create a d3 parser for this particular date format, this may not be relevant
// if you already have actual dates
var inFormat = d3.time.format("%Y-%m-%d %H:%M");

// Create a d3 parser for the day and time formats we are going to use
var dayFormat = d3.time.format("%d %b"),
    timeFormat = d3.time.format("%H:%M");

// Add some code to manipulate the date into 2 separate fields
// because this is a category axis you need to handle formatting here
// category axes use text content
data.forEach(function (d) {

    // Convert the date to an actual date, you may not need to do this if
    // you already have date objects in your data
    var inDate = inFormat.parse(d.Date);

    // Add a new field for the time portion
    d["Day"] = dayFormat(inDate);
    d["Time"] = timeFormat(inDate);

}, this);

在这里,我正在做我认为你想要的事情:

http://jsfiddle.net/87GHM/1/