여러 축을 가진 그래프의 하이 차트 레이블 값 대신 날짜가 표시됩니다.

Question

xAxis를 공유하는 선과 막대 그래프를 만들었습니다. 그러나 어떤 이유로 그것은 날짜 대신 값을 표시하도록 선택합니다. 표준 방법으로 제공하고 있습니다.

내가 무슨 말이냐?

바이올린 : http://jsfiddle.net/ZfP84/

$(function() { 

var options = { 
    chart: { 
     renderTo: 'container', 
    }, 
    navigator:{ 
     enabled:true 
    }, 
    scrollbar: { 
     enabled:true 
    }, 

    rangeSelector: { 
     enabled: true, 
     //selected: 1 
    }, 
    xAxis: { 
     gridLineWidth: 1, 
     labels: { 
      rotation: -45, 
      align: 'right', 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif' 
      } 
     } 
    }, 
    yAxis: [ 
    { 
     height: 150, 
     lineWidth: 2, 
     offset: 0, 
     title: { 
      text: 'Price', 
     } 
    }, 
    { 
     top: 225, 
     //lineWidth: 0, 
     //min: 0, 
     //max: 5, 
     gridLineWidth: 0, 
     offset: 0, 
     height: 100, 
     title: { 
      text: 'Volume', 
     } 
    }, 
    ], 

    series: [ 
    { 
     yAxis: 0, 
     name: 'Price by time', 
     stack: 0, 

     //data: [1, 12, 32, 43],  
     data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],], 
     tooltip: { 
      valueDecimals: 2 
     },   
    }, 
    { 
     name: 'Volume by time', 
     yAxis: 1, 
     stack: 0, 
     data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],], 
     tooltip: { 
      valueDecimals: 2 
     }, 
     lineWidth: 3, 
     marker: { 
      enabled: false 
     }, 

     type: 'column', 
    }, 
    ] 

}; 

var chart = new Highcharts.Chart(options); 

}); 

Answer 1

그런 다음 X 값은 날짜와 시간보다는 소수 값

xAxis: { 
    type : "datetime", //add this line 
    gridLineWidth: 1, 
    labels: { 
     rotation: -45, 
     align: 'right', 
     style: { 
      fontSize: '13px', 
      fontFamily: 'Verdana, sans-serif' 
     } 
    } 
}, 

당신이 수도로 해석됩니다 x 축 정의에 "형식"을 추가 한 경우 HighChart가 X 값을 올바르게 해석하도록 시작 시간과 간격을 피딩해야합니다. 하이 차트 웹 사이트에서이 데모를 예로 들어보십시오. http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/

Answer 2

실제로 주식 차트를 만들지 않기 때문입니다. 기본적으로

var chart = new Highcharts.StockChart(options); 

차트는 범주 차트 :

var chart = new Highcharts.Chart(options); 

은 당신이 주식 차트 할 수 있도록하려면 : 코드는 것 같습니다. StockChart는 시간 기반입니다.

Answer 3

dateFormat을 사용하여 시간 (밀리 초)을 date로 바꿀 수 있습니다.

는

http://jsfiddle.net/3bE4X/

formatter:function(){ 
       return Highcharts.dateFormat('%d/%m/%Y',this.value); 
} 

http://api.highcharts.com/highcharts#Highcharts.dateFormat()