如何风格导航拖动控制柄，Highstock

问题描述

从颜色装饰，可以设置导航器手柄的样式（如形状，高度，宽度，边框半径，背景等）。

API文档：

解决方案

重写 Highcharts.Scroller.prototype.drawHandle 函数与自定义。您可以将代码基于现有代码，并添加更多选项和元素，如本示例所示：（原始问题，当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; 
 
 //创建元素
 if（！scroller.rendered）{
 //组
 handles [index] = renderer.g（'navigator-handle - '+ ['left'，'right'] [index]）
 .css（{
 cursor：'ew-resize'
}）
 .attr b $ b zIndex：10  -  index 
}）
 .add（）; 
 
 // cirlce 
 tempElem = renderer.circle（0，0，radius）
 .attr（attr）
 .add（handles [index]）; 
 elementsToDestroy.push（tempElem）; 
 
 //内行
 tempElem = renderer.path（[
'M'，-1.5，-h / 2，
'L' 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）; 
} 
 
 //放置
处理[index] [chart.isResizing？ 'animate'：'attr']（{
 translateX：scroller.scrollerLeft + scroller.scrollbarHeight + parseInt（x，10），
 translateY：scroller.top + scroller.height / 2 
 }）; 
}; 
}）（Highcharts）; 
 
 
 
 
 $（'＃container'）。highcharts（'StockChart'，{
 
 navigator：{
 handle：{
 backgroundColor：'white'，
 borderColor：'gray'，
 radius：8，
 innerLines：{
 color：'blue'，
 height：6 
} 
} 
}，
 
 rangeSelector：{
已选择：1 
}，
 b $ b系列：[{
 name：'USD to EUR'，
 data：usdeur 
}] 
}）; 
}）; 
 

在较新版本（4.2.6,4.2.7和5.0.0 - 当前最新版本）中，drawHandle因此包装应该以：

  HC.Navigator.prototype.drawHandle = function（x，index）{
  

演示：

Appart from colors, is it possible to style the navigator handles(like shape, height, width, border radius, background, etc..).

From he API doc: http://api.highcharts.com/highstock#navigator.handles , I can only see backgroundColor and borderColor.

If the options is not supported, is there a way to dramatically replace it from some callback events?

The style I want is like:

解决方案

It is possible to extend Highcharts and override Highcharts.Scroller.prototype.drawHandle function with a custom one. You could base your code on existing one and add more options and elements like in this example: http://jsfiddle.net/kuos06o5/1/ (for original question when Highstock version was 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
    }]
  });
});

In newer versions (4.2.6, 4.2.7 and 5.0.0 - current newest) drawHandle was moved, so the wrapper should start with:

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

Demo: http://jsfiddle.net/kuos06o5/2/

这篇关于如何风格导航拖动控制柄，Highstock的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！