2014-04-25 12 views
5

Tôi là người mới đến d3.js, cũng như với c3.js. Tôi muốn dấu thời gian động trong c3.js như được hiển thị trong this d3.js example. Nó sẽ thay đổi định dạng thời gian theo phạm vi thời gian.Thêm định dạng dấu thời gian vào biểu đồ đường x-trục

Tôi đang theo dõi c3js.org's time series example. Nhưng không thể có được phạm vi động.

Mã như sau.

Cập nhật 1

var date1=new Date(1397657484*1000); 
var date2=new Date(1397657514*1000); 
var date3=new Date(1397657554*1000); 
var date4=new Date(1397657594*1000); 
var date5=new Date(1397657641*1000); 
var date6=new Date(1398323901*1000); 

var seconds = (date6.getTime() - date1.getTime())/1000; 

var xaxisformat; 
    if (seconds < 86400) 
    { 
     xaxisformat = '%I:%M:%S'; 
    } 
    else { 
     xaxisformat = '%Y-%m-%d %I:%M'; 
    } 

var format=d3.time.format(xaxisformat); //I am converting after if loop since we are calculating seconds using javascript. 

date1=format(date1); //I think this formatting required to pass d3.time to c3js 
date2=format(date2); 
date3=format(date3); 
date4=format(date4); 
date5=format(date5); 
date6=format(date6); 

var chart = c3.generate({ 
data: { 
    x: 'x', 
    columns: [ 
     ['x',date1, date2, date3, date4, date5, date6], 
     ['data1', 30, 200, 100, 400, 150, 250], 
     ['data2', 130, 340, 200, 500, 250, 350] 
    ] 
}, 
axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: xaxisformat 
     } 
    } 
} 
}); 

Đây có thể là câu hỏi ngớ ngẩn, nhưng tôi newbie để lĩnh vực này.

+1

Về chỉnh sửa (c3 -> d3), thực tế là thư viện c3 sử dụng D3 để tạo biểu đồ có thể sử dụng lại. Vì vậy, câu hỏi là hợp lệ. Đó cũng là tin cho tôi, nhưng được ghi lại ở đây: http://c3js.org/ –

Trả lời

7

Có một vài điều tôi phải làm để làm việc này.

Thứ nhất và quan trọng nhất là không khai báo lại d3 làm ngày vì bạn sẽ không thể sử dụng bất kỳ thư viện d3 nào! Tôi đổi tên d1, d2, d3... để date1, date2, date3...

Thứ hai, nó trông giống như c3.js chỉ cho phép một tập hợp con của định dạng specifiers thời gian và %X không phải là một trong số họ, vì vậy tôi đã thay đổi:

var parseDate = d3.time.format("%X"); 

để

var format = d3.time.format("%Y-%m-%d %I:%M:%S.%L"); 

Lưu ý rằng tôi cũng đã đổi tên parseDate thành format vì nó phản ánh điều gì đang xảy ra tốt hơn. Nhưng bạn không cần sử dụng điều này, hãy xem cập nhật của tôi bên dưới

Một cách để có định dạng thời gian trục x động là tính toán sự khác biệt giữa ngày cuối cùng và ngày đầu tiên - Trong trường hợp này, thay đổi định dạng nếu khoảng thời gian lớn hơn một ngày (86400 giây)

var seconds = (date6.getTime() - date1.getTime())/1000; 

var xaxisformat; 
if (seconds < 86400) 
{ 
    xaxisformat = '%I:%M:%S'; 
} 
else { 
    xaxisformat = '%Y-%m-%d %I:%M' 
} 

và thay đổi định dạng đánh dấu để:

x: { 
    type: 'timeseries', 
    tick: { 
     format: xaxisformat 
    } 

cập nhật

Thực ra bạn không cần phải sử dụng format=d3.time.format(...) ở đây, vì c3.js xử lý tất cả định dạng ngày. Vì vậy, bạn chỉ có thể làm được điều này (vượt qua ngày nhập trực tiếp trong c3 'x' cột chứ không phải định dạng nó, bởi vì nó sẽ được tái định dạng anyway):

var date1=new Date(1397657484*1000); 
... 
var date5=new Date(1397657641*1000); 
var date6=new Date(1397657741*1000); 

var seconds = (date6.getTime() - date1.getTime())/1000; 
var xaxisformat; 
if (seconds < 86400) 
{ 
    xaxisformat = '%I:%M:%S'; 
} 
else { 
    xaxisformat = '%Y-%m-%d %I:%M' 
} 

var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      ['x',date1, date2, date3, date4, date5, date6], 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 130, 340, 200, 500, 250, 350] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: xaxisformat 
      } 
     } 
    } 
}); 

Xin lỗi vì đã không làm điều đó rõ ràng trước đó!

+0

Áp dụng cùng một mã. Đầu tiên có thời gian tính bằng giây, sau đó định dạng thành định dạng d3.time và sau đó nếu vòng lặp để quyết định xaxisformat. Nhưng không có kết quả. Đang hiển thị NaN. –

+0

Tôi đã cập nhật mã, vui lòng xem. –

+0

Điểm tốt, tôi đã thực hiện một sai lầm (bạn không thực sự cần phải sử dụng định dạng = d3.time.format (...) ở tất cả ở đây.Tôi đã cập nhật câu trả lời để làm rõ –

Các vấn đề liên quan