ナビゲーターのハンドルをスタイルする方法、Highstock

Question

色から、形状、高さ、幅、ボーダー半径、背景などのスタイルを設定できますか？

APIドキュメント：http://api.highcharts.com/highstock#navigator.handlesから、私はbackgroundColorとborderColorしか見ることができません。

オプションがサポートされていない場合、一部のコールバックイベントから劇的に置き換える方法はありますか？

Answer 1

Highchartsを拡張し、カスタム1で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/をhttp://jsfiddle.net/kuos06o5/2/