爲高圖表，高股票啓用滾動

我想繪製每隔不定期更新數量的圖表。默認情況下，我應該顯示18個月的數據，並在18個月後顯示滾動條。點懸停時，應該有一個工具提示與該點相關的數據，而不是x和y值。在這裏，我嘗試使用tooltip，但加載失敗圖失敗。這裏是jsfiddle。我曾嘗試從網上做一些東西，但沒有運氣。任何解決方案將是很大的幫助。爲高圖表，高股票啓用滾動

參考： -

highchart

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

腳本：

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'scatter',zoomType: 'xy', 
     }, 
     title: { 
      text: ' ' 
     }, 
     subtitle: { 
      text: ' ' 
     }, 
     scrollbar: { 
     enabled: true, 

    }, 
     xAxis: { 
     ordinal: false, 
      type: 'datetime', 
      dateTimeLabelFormats: { // don't display the dummy year 
       month: '%e. %b', 
       year: '%b' 
      }, 
      title: { 
       text: 'Date' 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'renewal ammount(in Mn)' 
      }, 
      min: 0 
     }, 
     tooltip: { 
      headerFormat: '<b>{series.name}</b><br>', 
      pointFormat: '{point.x:%e. %b}: {point.y:.2f} m' 
     }, 

     plotOptions: { 
      spline: { 
       marker: { 
        enabled: true 
       } 
      } 
     }, 

     series: [{ 

      name: '0-1', 

      // Define the data points. All series have a dummy year 
      // of 1970/71 in order to be compared on the same x axis. Note 
      // that in JavaScript, months start at 0 for January, 1 for February etc. 
      data: [ 





      ],pointInterval: 30*24 * 3600 * 1000 
     }, { 
      name: '1-2', 
      data: [ 

      [Date.UTC(2016,07,16),1.3],[Date.UTC(2018,06,18),1.3,,ww:'mydata'],[Date.UTC(2019,06,19),1.3,ww:'mydata'],[Date.UTC(2016,12,16),1.3,ww:'mydata'],[Date.UTC(2016,06,16),1.3,ww:'mydata'],[Date.UTC(2016,02,16),1.3,ww:'mydata'],   



      ],pointInterval: 30*24 * 3600 * 1000 
     },{ 
      name: '2-3', 
      data: [ 

      [Date.UTC(2017,05,17),2.9],[Date.UTC(2016,03,16),2.1],[Date.UTC(2018,06,18),2.1],   



      ],pointInterval: 30*24 * 3600 * 1000 
     },{ 
      name: '3-4', 
      data: [ 





      ],pointInterval: 30*24 * 3600 * 1000 
     },{ 
      name: '4-5', 
      data: [ 





      ],pointInterval: 30*24 * 3600 * 1000 
     },] 
    }); 
});

來源

2015-12-18 3bu1

的可能的複製（ http://stackoverflow.com/questions/9432711/how-to-enable-highcharts-scrollbar） –

@KacperMadej我hav e也實現了，也沒有運氣 – 3bu1

那麼，這個實現有什麼問題嗎？ http://jsfiddle.net/ctn1svqb/3/ –

只是爲了澄清：滾動條與highstock一起使用。

如何使用它？

<script src="https://code.highcharts.com/stock/highstock.js"></script>
添加滾動條
加「分：XX」 X軸

檢查：？如何啓用Highcharts滾動] http://jsfiddle.net/mushigh/xjearL2z/

<script src="https://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 


$(function() { 
    $('#container').highcharts({ 


    chart: { 
     type: 'line', 
     zoomType: 'xy', 
    }, 
    scrollbar: { 
     enabled: true, 
    }, 
    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' 
     ], 
     min: 8 
    }, 

    series: [{ 
     name: 'Tokyo', 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 
    }] 
    }); 
});

來源

2015-12-21 13:56:32

這不是我想要的，雖然你的答案是對的，我知道了。謝謝你的努力 – 3bu1

爲高圖表，高股票啓用滾動

回答

相關問題