2014-05-15 2 views
1

아래쪽 축에 지속 시간이있는 막 대형 차트를 만들려고합니다. 300.5 초 또는 50.3 시간과 같은 10 진수로 작동하지만 다음 형식을 사용하고 싶습니다. 시간 : 분 : 초. datalabelformat : datetime으로 시도했지만 성공하지 못했습니다. 10시 5분 18초
멤버 2 - - 12시 52분 20초
멤버 3 - 18시 10분 30초
멤버 4 - 19시 20분 10초
멤버 5
멤버 1 :Highchart : 시간이 표시된 막대 차트

데이터는 예를 들어 것 - 19:30:45

아무도 모르게 아이디어를 얻었습니까? 사전에

감사합니다!

+0

데이터는 어떻게 생겼습니까? x 값은 시간 형식 (epoch 밀리 초)입니까? – Mark

+0

@ 마크 : 원시 데이터는 초입니다. 하지만 내가 PHP를 사용하여 원하는대로 변환 할 수있을 것 같아요. – knzo

+0

이 값은 몇 초 이후입니까? 시대? 어떤 임의의 가치? 축에서이 값의 차이를 시간 : 분 : 초로 나타내시겠습니까? – Mark

답변

2

min value 및 tickInterval을 설정 한 다음 dateTimeLabels를 설정해야합니다.

dateTimeLabelFormats: { 
      millisecond: '%H:%M:%S', 
      second: '%H:%M:%S', 
      minute: '%H:%M:%S', 
      hour: '%H:%M:%S', 
      day: '%H:%M:%S', 
      week: '%H:%M:%S', 
      month: '%H:%M:%S', 
      year: '%H:%M:%S' 
     } 

예 :

http://jsfiddle.net/TynTT/1/

2

나는 내 문제에 대한 해결책을 찾고 여기에왔다. 이것이 당신이 원하는 것과 정확히 일치하는지 확신 할 수 없으며 낮은 평판 때문에 의견을 말할 수 없습니다. 그러나 이것이 내가 어떻게 그것을 풀 수 있었는지입니다.

이 결과는 hh : mm입니다. 초를 포함하도록 수정할 수 있습니다. http://jsfiddle.net/TynTT/11/

y 축은 hh : mm 형식이며, 데이터 레이블은 hh : mm으로 표시됩니다.

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    yAxis: { 
     type: 'time', 
     labels: { 
      formatter: function() { 
       var time = this.value; 
       var hours1=parseInt(time/3600000); 
       var mins1=parseInt((parseInt(time%3600000))/60000); 
       return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1); 
      } 
     } 
    }, 
    series: [{ 
     data: [1000000, 26500000, 17000050, 79000000, 56000000, 124000000], 
     dataLabels: { 
      enabled: true, 
      formatter: function() { 
       var time = this.y/1000; 
       var hours1=parseInt(time/3600); 
       var mins1=parseInt((parseInt(time%3600))/60); 
       return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1); 
      } 
     }, 
    }] 
}); 
});