如何风格导航拖动手柄，Highstock

Question

从颜色Appart，是否有可能风格导航手柄（如形状，高度，宽度，边界半径，背景等..）。

从他的API文档：http://api.highcharts.com/highstock#navigator.handles，我只能看到backgroundColor和borderColor。

如果不支持这些选项，是否有办法从一些回调事件中大幅取代它？

我想要的风格是这样的：

Answer 1

它可以延长Highcharts并覆盖Highcharts.Scroller.prototype.drawHandle函数的自定义一个。你可以立足于现有的代码，并在这个例子中添加更多选项和元素，如：http://jsfiddle.net/kuos06o5/1/（用于原来的问题时Highstock版本是4.2.5）

$(function() { 
    //custom handles 
    (function(HC) { 
    HC.Scroller.prototype.drawHandle = function(x, index) { 
     var scroller = this, 
     chart = scroller.chart, 
     renderer = chart.renderer, 
     elementsToDestroy = scroller.elementsToDestroy, 
     handles = scroller.handles, 
     handlesOptions = scroller.navigatorOptions.handles, 
     radius = handlesOptions.radius, 
     attr = { 
      fill: handlesOptions.backgroundColor, 
      stroke: handlesOptions.borderColor, 
      'stroke-width': 1 
     }, 
     tempElem, 
     innerLinesOptions = handlesOptions.innerLines, 
     h = innerLinesOptions.height; 

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

     // cirlce 
     tempElem = renderer.circle(0, 0, radius) 
      .attr(attr) 
      .add(handles[index]); 
     elementsToDestroy.push(tempElem); 

     // inner lines 
     tempElem = renderer.path([ 
      'M', -1.5, -h/2, 
      'L', -1.5, h/2, 
      'M', 1.5, -h/2, 
      'L', 1.5, h/2 
      ]) 
      .attr({ 
      stroke: innerLinesOptions.color, 
      'stroke-width': 1 
      }) 
      .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 
     }); 
    }; 
    })(Highcharts); 




    $('#container').highcharts('StockChart', { 

    navigator: { 
     handles: { 
     backgroundColor: 'white', 
     borderColor: 'grey', 
     radius: 8, 
     innerLines: { 
      color: 'blue', 
      height: 6 
     } 
     } 
    }, 

    rangeSelector: { 
     selected: 1 
    }, 

    series: [{ 
     name: 'USD to EUR', 
     data: usdeur 
    }] 
    }); 
}); 

在新版本（4.2.6，4.2.7和5.0.0 - 当前最新的）drawHandle很感动，所以包装应该开始：

HC.Navigator.prototype.drawHandle = function(x, index) { 

演示：http://jsfiddle.net/kuos06o5/2/