2016-04-07 20 views
-1

olarak kalıyor Uzatılabilir kaydırma çubuğunun işlevselliğini korumam gerekiyor, fakat genel bakış yönlendiricisine ihtiyacım yok. Gibi:Navigator'ı (küçük seri) devre dışı bırakmak mümkün mü, ancak genişletilebilir kaydırma çubuğu, Highstock

screenshot

ben hala genişletilebilir kalır kaydırma çubuğunu (bölge 1) gerekir, ancak gezgini (alan 2) çıkarın.

Bu

ne istiyorum bir tasarımdır:

Want something like this

demo hızlı değiştirebilir dan:

$(function() { 

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
    // Create the chart 
    var chart = $('#container').highcharts('StockChart', { 
     rangeSelector : { 
      enabled: false 
     }, 
     title: { 
      text: null 
     }, 
     navigator: { 
      enabled:false,//make it false , but the scroll bar is not extensible 
      outlineWidth: 0 
     }, 
     scrollbar: { 
      barBackgroundColor: '#ccc', 
      barBorderWidth: 0, 
      buttonBackgroundColor: '#ccc', 
      buttonBorderWidth: 0, 
      buttonArrowColor: '#fff', 
      buttonBorderRadius: 3, 
      rifleColor: '#fff', 
      trackBackgroundColor: 'white', 
      trackBorderWidth: 1, 
      trackBorderColor: '#ccc', 
      trackBorderRadius: 3 
     }, 
     series: [{ 
       type:'areaspline', 
      showInLegend: false, 
      name: 'AAPL1', 
      data: data 
     },{ 
       type:'areaspline', 
      showInLegend: false, 
      name: 'AAPL2', 
      data: data.map(function(d){return [d[0],parseInt(d[1])*2 ]}) 
     }] 
    }); 
}); 

}); 

cevap

0

Kaydırma çubuğu Navigator gibi yeniden boyutlandırılamaz, bu yüzden ne gerçekten düşünmek kullanmak istiyorum (2) Navigator ve devre dışı (1) Scrollbar. İşte basit bir örnek yapmak için ne olduğunu:

: navigator altyapıya sahip olursa http://jsfiddle.net/dJbZT/183/

 navigator: { 
      enabled:true, 
      outlineWidth: 0, 
      height: 14, 
      maskFill: '#cccccc', 
      series: { 
       data: [] // empty navigator 
      }, 
      xAxis: { 
       labels: { 
       y: -20 // move labels outside the navigator 
       } 
      } 
     }, 

, sen serisi, orijinal serinin başında diğeri ucunda bir iki kukla noktalar ekleyebilirsiniz

   data: [ 
       [data[0][0], 2], 
       [data[data.length - 1][0], 2] 
       ] 

Ardından, bir seri için rengi ve fillOpacity değerini, elde etmek istediğiniz renge ayarlayın ve yAxis.max kukla değerinizin altına getirin (benim durumumda 2). Çalışma demoları: http://jsfiddle.net/dJbZT/184/

+0

Arka plan rengine ne dersin, örneğinizde "kaydırma çubuğu" kabı göremiyoruz. – Jaskey

+0

Bu doğru, arka plan yok. Ancak, gezginde bir dizi için renk ayarlayabilirsiniz. Bazı parlatma ile, gerekli sonucu alacaksınız, bir göz atın: http://jsfiddle.net/dJbZT/184/ –

+0

Navigator verileri ne demektir? iki veri veya bir şey olmalı mı? Lütfen açıklamayı cevabınız ile günceller misiniz? – Jaskey

İlgili konular