2012-12-20 2 views
7

이유 공개 - 나는 자바 스크립트에 끔찍하지만 배우려고 노력하고 있습니다!nvD3 초보자 - 유닉스 타임 스탬프를 x 축에 날짜로 표시하려면 어떻게해야합니까?

[1349013600] => 232

키의 값 그날로부터 매출 $이고, 유닉스 소인이다

는 I는 이들과 같은 몇 가지 항목이 배열을 가지고있다. 나는 현재 이러한 작업을 훌륭하게 수행하고있는 멀티 바 차트에서 그래프로 나타냅니다.

chart.xAxis 
.tickFormat(d3.format(',f')); 

그것은 x 축 라벨 및 호버 툴팁에 대한 직선 int로서 유닉스 타임 스탬프를 출력합니다

문제는 현재 다음과 같이 정의 내 x 축입니다. 나는 D-M-Y 또는 이와 유사한 사람이 읽을 수있는 날짜 표시기로 출력하려고 노력하고 싶습니다.

내가 찾은 가장 가까운 코드의이 비트입니다 :

chart.xAxis.tickFormat(function(d) { 
     var dx = testdata[0].values[d] && testdata[0].values[d].x || 0; 
    return d3.time.format('%x')(new Date(dx)) 
}); 

그러나 나는 그것을하고있어 내 특정 차트에서 구현할 수없는 것을 이해하는 데 어려움을 겪고 있어요. 현재 코드는 다음과 같습니다.

nv.addGraph(function() { 
var chart = nv.models.multiBarChart() 
      .stacked(true) 

chart.xAxis 
    .tickFormat(d3.format(',f')); 

chart.yAxis 
    .tickFormat(function(d) { return '$' + d3.format(',f')(d) }); 

d3.select('#chart1 svg') 
    .datum(test_data2) 
    .transition().duration(500).call(chart); 

nv.utils.windowResize(chart.update); 

return chart; 
}); 

누군가가 작동 방식을 설명 할 수 있습니까? 더 중요한 것은 왜입니까? 어떤 조언을 감사하십시오!

답변

4

JavaScript 타임 스탬프는 밀리 초이므로 JavaScript를 사용하기 전에 유닉스 스탬프에 1000을 곱해야합니다.

+1

팁 주셔서 감사. (SQL 데이터베이스에 저장되어있는) 날짜는 실제로 읽을 수있는 형식 (YYYY/MM/DD)이지만 이미 데이터베이스에서 가져온 strtotime (PHP 함수)을 사용하여 변환합니다. 이것이 반 직관적 인 것처럼 보입니다. 그러나 유닉스 스탬프에서 실제 값 할당이 축을 통해 적절히 배치되도록해야한다고 생각합니다. 어쨌든 - ms가 아닌 s에 있어야합니다. – mcl

14

나는 내가 현상금을 열었로

다음

.tickFormat(function(d){return d3.time.format('%d-%b')(new Date(d));})

와 해트트릭 일 것입니다 (오 드!) 빨리 문제를 해결 nvd3에 대한 데이터를 다시 포맷하는 것이 었습니다 이 후 축이 만들어집니다

+1

아마 5 명이이 답변을 찾은 데 도움이되었고 upvoted 평판 포인트에서도 깨질 수도 있음 – CQM

+5

tickFormat 함수 외부에서 시간 형식을 선언하는 것이 좋습니다. 그러면 원하는 모든 눈금에 대해 새 시간 형식 인스턴스가 만들어지지 않을 것입니다. 표시 (느리고 낭비되는 메모리). 마찬가지로 진드기 서식 지정의 부작용이 아니라 전처리 단계로 데이터를 JavaScript Date 개체로 변환하는 것이 좋습니다. 그런 식으로, 당신이 날짜를 참조하는 다른 장소가 있다면, 그것은 항상 UNIX 초보다 나쁘거나 더 현명한 Date 객체입니다. – mbostock

관련 문제