使用 dc.js 构建一些图表。 localHour 属性包含 0 到 23 之间的数字。但是,在我的轴上使用它时,所有数字都报告为千分之一而不是标准小时。 04 PM 也出现在原点。
我该如何解决这个问题?
var hourDim = ndx.dimension(function(d){ return d.hour; });
var num = hourDim.group().reduceSum(dc.pluck('count'));
var mainChart = dc.lineChart("#main");
mainChart
.width(500).height(200)
.dimension(hourDim)
.group(num)
.x(d3.time.scale().domain([0,24]))
.yAxisLabel("Count per Hour")
最佳答案
这里实际发生的是您的“小时”测量值被解释为毫秒。如果您没有另外指定,则毫秒是默认的 Javascript 时间单位。具体来说,您会在 Javascript 零时间之后获得毫秒数,这是 1969 年 12 月 31 日或 1970 年 1 月 1 日的某个时间,具体取决于时区调整,并且显然是从您所在时区的下午 4 点开始。其余的只是默认格式,试图让事情看起来不错。
除非您正在做其他需要将小时数视为时间戳的事情,否则最简单的方法可能是将小时数保留为纯数字,使用线性刻度而不是时间刻度。
如果您对轴标签上的普通旧式“1”、“2”、“3”没问题,那么您只需要做这些。
如果你想让这些数字看起来像小时,你需要设置一个tickFormat图表轴上的函数。
你可以做类似的事情
mainChart.x(d3.scale.linear().domain([0,24])
.tickFormat(function(h){return h + ":00";})
);
但是,如果轴决定将刻度设置为分数值,则会出现问题——您会得到看起来像 1.5:00 而不是 1:30 的东西。您可以使用一些数学和数字格式化函数来解决这个问题,但此时您已经做了足够多的工作,值得使用正确的日期时间格式。
要获得正确的小时:分钟轴标签,您可以使用 d3 time formatting函数来指定格式,但您还必须将小时数转换为有效的日期时间对象。
var msPerHour = 1000*60*60;
var timeFormat = d3.time.format.utc("%H:%M");
mainChart.x(d3.scale.linear().domain([0,24])
.tickFormat(function(h){
return timeFormat(new Date(msPerHour*h) );
})
);
请注意,我已将时间格式函数指定为使用 UTC 时间而不是本地时间,因此它将零视为午夜。它仍然认为现在是 1970 年 1 月 1 日午夜,但您还将格式指定为仅包含小时和分钟,因此这应该不是问题。
关于javascript - DC.js X 轴小时标签显示为千分之一,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21392997/