2015-01-13 5 views
1

Есть ли способ увеличить высоту ручек в компоненте навигатора Highstock? Прямо сейчас доступны только следующие параметры: изменить цвет и цвет границы. Как насчет высоты и ширины ручек?Highcharts навигатор высота ручки

http://api.highcharts.com/highstock#navigator.handles

Спасибо,

Викас.

ответ

3

Вы можете обернуть drawHandles функцию и измените его, чтобы увеличить высоту.

var height = 20; 

(function (H) { 
    H.wrap(H.Scroller.prototype, 'drawHandle', function (proceed, x, index) { 
     var scroller = this, 
      chart = scroller.chart, 
      renderer = chart.renderer, 
      elementsToDestroy = scroller.elementsToDestroy, 
      handles = scroller.handles, 
      handlesOptions = scroller.navigatorOptions.handles, 
      attr = { 
       fill: handlesOptions.backgroundColor, 
       stroke: handlesOptions.borderColor, 
        'stroke-width': 1 
      }, 
      tempElem; 

     // create the elements 
     if (!scroller.rendered) { 
      // the group 
      handles[index] = renderer.g('navigator-handle-' + ['left', 'right'][index]) 
       .css({ 
       cursor: 'e-resize' 
      }) 
       .attr({ 
       zIndex: 4 - index 
      }) // zIndex = 3 for right handle, 4 for left 
      .add(); 

      // the rectangle 
      tempElem = renderer.rect(-4.5, 0, 9, height, 0, 1) 
       .attr(attr) 
       .add(handles[index]); 
      elementsToDestroy.push(tempElem); 

      // the rifles 
      tempElem = renderer.path([ 
       'M', -1.5, 4, 
       'L', -1.5, 12, 
       'M', 
      0.5, 4, 
       'L', 
      0.5, 12]).attr(attr) 
       .add(handles[index]); 
      elementsToDestroy.push(tempElem); 
     } 

     // Place it 
     handles[index][chart.isResizing ? 'animate' : 'attr']({ 
      translateX: scroller.scrollerLeft + scroller.scrollbarHeight + parseInt(x, 10), 
      translateY: scroller.top + scroller.height/2 - 8 
     }); 

    }); 
}(Highcharts)); 

http://jsfiddle.net/za68w54r/

+0

Большое спасибо Себастьяну! Вот один из вопросов, хотя, когда я увеличиваю высоту дескриптора до более чем 20, 2 строки внутри него все еще расположены к вершине. Как это изменить? http://jsfiddle.net/Yrygy/303/ – vikasrao

+0

Я переменная tempElem, есть рендерер, который печатает. Исправленный пример: http://jsfiddle.net/Yrygy/304/ –

2

Существует вариант для увеличения высоты штурмана тоже ..

Проверить эту скрипку:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/navigator/height/

Код:

navigator: { 
     height: 100 
    }, 
+0

Я имел в виду высоту ручки в выбранном интервале времени – vikasrao

+0

Его не возможно .. Есть только варианты, доступные для изменения цвета ручки и границы цветов. – Swetha

+0

, который работает для меня спасибо :) –

Смежные вопросы