lineChart xAxis錯誤的日期

爲什麼我的lineChart在xAxis中顯示月份而不是星期日？lineChart xAxis錯誤的日期

感謝您的幫助=）

這裏是我的代碼：

VAR hitslineChart = dc.lineChart（「＃排行榜線hitsperday」）;

var data = [ 
     {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
     {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100}, 
     {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200}, 
     {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1}, 
     {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1}, 
     {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
     ]; 

var ndx = crossfilter(data); 
var parseDate = d3.time.format("%m/%d/%Y").parse; 
data.forEach(function(d) { 
    d.date = Date.parse(d.date); 
    d.total= d.http_404+d.http_200+d.http_302; 
}); 

var dateDim = ndx.dimension(function(d) {return d.date;}); 
var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 

hitslineChart 
    .width(500).height(200) 
    .dimension(dateDim) 
    .group(hits) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .xAxis().ticks(5) 
    .yAxisLabel("Hits per day"); 

dc.renderAll();![the result][1]

在x軸的結果是：Thu27-Fri28-Sat29-Dec30-Mon31-2013-Wed02-Thu03-Fri04-Sat05-Jan06 ...

來源

2014-01-10 user3181885

1）你會希望你解析使用日期格式化程序傳入的數據：

d.date = Date.parse(d.date); \\ Old 
d.date = parseDate.parse(d.date); \\ New

這將明確地匹配輸入數據的格式。

2）如果您希望數據按日期分組，您需要在維度中指定該數據。 d3.time.day幫助程序將在提供的數據上將時間設置爲00:00:00。這使得在一起，就像你想要的數據組：

var dateDim = ndx.dimension(function(d) {return d.date;}); \\old 
var dateDim = ndx.dimension(function(d) {return d3.time.day(d.date);}); \\ new

是否要每天一個點目前尚不清楚（1月1日，1月2日，1月3日，等）或每星期幾的一個點（太陽，週一，週二）。 d3.time.day方法按日曆日對日期進行分組。

3）您可以使用以下方法指定刻度格式：

.xAxis().tickFormat(function(v) {return displayDate(v)});

詳情約時間格式，請https://github.com/mbostock/d3/wiki/Time-Formatting。

這裏是適應你的代碼在x軸上顯示星期幾的jsfiddle： http://jsfiddle.net/djmartin_umich/6V4Ey/

我希望這有助於！ -DJ

來源

2014-01-10 18:57:07

lineChart xAxis錯誤的日期

回答

相關問題