Highcharts水平滚动

我是新来的highcharts，我正在尝试用酒吧和线条做图形。条表示设定值的平均值，线表示该组的实际值。Highcharts水平滚动

我用100个值随机生成了这个集合，但是当我在Jsfiddle中运行图表时，图形界面看起来非常可怕。我把拖放选择缩放，但不舒服使用。然后我决定放一个水平滚动条，我在Stack Overflow文章中看到我必须包含highstock.js，启用滚动条并设置min和max参数以启用滚动滚动。我做了它，我的图表工作，但没有滚动。

链接到图表：http://jsfiddle.net/zd12fa5L/2/

根据的jsfiddle，我的HTML是：

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://code.highcharts.com/stock/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
<div id="container" style="height: 400px"></div> 
<div id="report"></div>

而且JSON是：

// create the chart 
Highcharts.chart('container', { 
    chart: { 

     events: { 
      selection: function (event) { 
       var text, 
        label; 
       if (event.xAxis) { 
        text = 'min: ' +  Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' +  Highcharts.numberFormat(event.xAxis[0].max, 2); 
       } else { 
        text = 'Selection reset'; 
       } 
       label = this.renderer.label(text, 100, 120) 
        .attr({ 
         fill: Highcharts.getOptions().colors[0], 
         padding: 10, 
         r: 5, 
         zIndex: 8 
        }) 
        .css({ 
         color: '#FFFFFF' 
        }) 
        .add(); 

       setTimeout(function() { 
        label.fadeOut(); 
       }, 1000); 
      } 
     }, 
     zoomType: 'x' 
    }, 
    title: { 
     text: 'Chart selection demo' 
    }, 
    subtitle: { 
     text: 'Click and drag the plot area to draw a selection' 
    }, 


    xAxis: { 
     min: 0, 
     max:9, 

     categories:  ['Subject1','Subject2','Subject3','Subject4','Subject5','Subject6','Subject7','Subject8','Subject9', 
       'Subject10','Subject11','Subject12','Subject13','Subject14','Subject15','Subject16','Subject17', 
       'Subject18','Subject19','Subject20','Subject21','Subject22','Subject23','Subject24','Subject25', 
       'Subject26','Subject27','Subject28','Subject29','Subject30','Subject31','Subject32','Subject33', 
       'Subject34','Subject35','Subject36','Subject37','Subject38','Subject39','Subject40','Subject41', 
       'Subject42','Subject43','Subject44','Subject45','Subject46','Subject47','Subject48','Subject49', 
       'Subject50','Subject51','Subject52','Subject53','Subject54','Subject55','Subject56','Subject57', 
       'Subject58','Subject59','Subject60','Subject61','Subject62','Subject63','Subject64','Subject65', 
       'Subject66','Subject67','Subject68','Subject69','Subject70','Subject71','Subject72','Subject73', 
       'Subject74','Subject75','Subject76','Subject77','Subject78','Subject79','Subject80','Subject81', 
       'Subject82','Subject83','Subject84','Subject85','Subject86','Subject87','Subject88','Subject89', 
       'Subject90','Subject91','Subject92','Subject93','Subject94','Subject95','Subject96','Subject97', 
       'Subject98','Subject99','Subject100'] 
    }, 
    scrollbar: { 
     enabled: true 
    }, 
    series: [{ 

     type: 'column', 
     name: 'Average', 

     data:  [514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0,514.0 ] 
    }, 
    { 

     name: 'Value', 
     data:  [11.0,11.0,118.0,126.0,131.0,142.0,159.0,172.0,178.0,181.0,182.0,186.0,189.0,206.0,218.0,219.0,221.0,238.0,  256.0,260.0,272.0,282.0,283.0,300.0,317.0,337.0,351.0,360.0,404.0,424.0,425.0,438.0,446.0,456.0,462.0, 
      464.0,468.0,469.0,479.0,488.0,494.0,501.0,501.0,503.0,504.0,516.0,518.0,519.0,522.0,530.0,531.0,533.0, 
      534.0,537.0,549.0,563.0,565.0,573.0,577.0,599.0,608.0,631.0,638.0,641.0,649.0,668.0,674.0,68.0,68.0, 
      683.0,7.0,727.0,735.0,748.0,749.0,771.0,782.0,783.0,799.0,831.0,839.0,844.0,847.0,847.0,854.0,86.0,867.0, 
      873.0,888.0,891.0,894.0,896.0,898.0,910.0,918.0,938.0,944.0,963.0,981.0,999.0 

     ] 
    }] 
});

谢谢你，问候。

来源

2017-06-02 Marco

阅读Scrollbars for any axis

仅<script src="https://code.highcharts.com/stock/highstock.js"></script>和删除<script src="https://code.highcharts.com/highcharts.js"></script>包含。然后滚动条会出现。

Fiddle demo

来源

2017-06-03 05:54:07

它运行正常。谢谢：） – Marco

Highcharts水平滚动

回答

相关问题