DC.js X轴小时标签显示为千分之一 [英] DC.js X-axis hour labels appear as thousandths

问题描述

使用dc.js构建一些图表。 localHour属性包含0到23之间的数字。但是，当在我的轴上使用时，所有数字都报告为千分之一而不是标准小时。

如何解决这个问题？

  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（每小时计数）
  

解决方案

这里的实际情况是，你的小时测量被解释为毫秒。如果没有指定，毫秒是默认的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;}）
）; 
  

但是，如果轴决定将ticks设置为小数值会导致问题 - 看起来像1.5：00而不是1:30。你可以用一些数学和数字格式化函数来解决这个问题，但是在这一点上你已经做了足够的工作，使用合适的日期时间格式化。

正确小时：分钟轴标签，则可以使用 d3时间格式功能指定格式，但是您还必须将小时数转换为有效的日期时间对象。

  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日午夜，但您还指定格式设置只包括小时和分钟，这不应该是一个问题。

Using dc.js to build some charts. The localHour attribute contains numbers between 0 and 23. However, when using this on my axis, all numbers are reported as thousandths instead of the standard hour. 04 PM also appears at the origin.

How can I fix this?

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")  

解决方案

What's actually going on here is that your "hour" measurements are being interpretted as milliseconds. Milliseconds are the default Javascript time unit if you don't specify otherwise. Specifically, you're getting milliseconds after the Javascript zero time, which is sometime on Dec 31 1969 or Jan 1 1970 depending on timezone adjustment, and apparently starts at 4pm in your timezone. The rest is just default formatting trying to make things look nice.

Unless you're doing other things that require the hours to be treated as timestamps, it is probably easiest to leave the hours as plain numbers, using a linear scale instead of a time scale.

If you're fine with plain old "1", "2", "3" on the axis labels, that's all you have to do.

If you want those numbers to look like hours, you need to set a tickFormat function on the chart axis.

You could just do something like

mainChart.x(d3.scale.linear().domain([0,24])
                         .tickFormat(function(h){return h + ":00";})
        );

But that causes problems if the axis decides to put ticks at fractional values -- you'll get something that looks like 1.5:00 instead of 1:30. You could fix that with some math and number formatting functions, but at that point you're doing enough work to make it worth using proper date-time formatting.

To get proper hour:minute axis labels, you can use a d3 time formatting function to specify the format, but you're also going to have to translate the number of hours into a valid date-time object.

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) );
                         })
        );

Note that I've specified the time format function to use UTC time instead of local time, so that it treats zero as midnight. It still thinks it's midnight, Jan 1 1970, but you're also specifying the formatting to only include hours and minutes so that shouldn't be an issue.

这篇关于DC.js X轴小时标签显示为千分之一的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！