2013-08-24 4 views
0

매일 매일의 시간 범위를 표시하기 위해 차트를 만들려고합니다. 다시 말해서, 나는 다음과 같은 것을 만들고 싶습니다. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ 온도 대신 시간 정보가 필요합니다. 이 코드 (https://paste.maxux.net/x61fKlc)를 만들었지 만 시스템에서 막대를 그려 내지 않습니다.시간이있는 하이 차트 열 범위

다른 사람이 어떻게하는지 설명 할 수 있습니까? 시간 내 줘서 고마워.

$('#container').highcharts({ 

     chart: { 
      type: 'columnrange', 
      inverted: true 
     }, 
     xAxis: { 
      categories: ['01/01/2000', '02/01/2000', '03/01/2000', '04/01/2000', '05/01/2000', '06/01/2000', '07/01/2000'] 
     }, 
     yAxis: { 
     type: 'datetime', 
      title: { 
       text: 'Heure' 
      } 
     }, 
     plotOptions: { 
      columnrange: { 
        dataLabels: { 
          enabled: true, 
          formatter: function() { 
        return (this.y.getHours()+1) + ':' + (this.y.getMinutes()); 
          } 
        } 
      } 
     }, 

     legend: { 
      enabled: false 
     }, 

     series: [{ 
      name: 'Working hours', 
      data: [ 
          [Date(0,0,0, 12,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 16,00,00)], 
          [Date(0,0,0, 14,00,00), new Date(0,0,0, 17,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)], 
          [Date(0,0,0, 13,00,00), new Date(0,0,0, 15,00,00)] 
     ] 
     }] 

    }); 

답변

1

첫째, Date.UTC 대신 Date의 사용 - 그것은 (당신이 열 범위에서 사용할 수있는 인 내가 믿는) 숫자를 반환합니다; 둘째, 현재 데이터 인 밀리 초에서 날짜 객체를 생성하기 위해 포맷을 변경, 제대로 그 표시 :

formatter: function() { 
    var d = new Date(this.y); 
    return return d.getHours() + ':' + (d.getMinutes()); 
} 

확인 jsFiddle here합니다.