如何设置导航器拖动手柄的样式,Highstock

时间:2016-04-12 10:45:13

标签: javascript css highstock

来自颜色的公寓,可以设置导航器手柄的样式(如形状,高度,宽度,边框半径,背景等)。

从他的API文档:http://api.highcharts.com/highstock#navigator.handles,我只能看到backgroundColorborderColor

如果不支持这些选项,是否有办法从某些回调事件中大幅替换它?

我想要的风格如下:

What I want

1 个答案:

答案 0 :(得分:2)

<强>更新 从v6.0.0开始,句柄可通过API选项自定义 - https://api.highcharts.com/highstock/navigator.handles.symbols

以下遗留解决方案

可以使用自定义功能扩展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/