为特定系列设置十字准线颜色 - highcharts

时间:2018-06-05 21:53:21

标签: javascript highcharts

我正在尝试在多系列高图上设置十字准线颜色,我不确定我应该尝试设置它的属性是什么。我正在覆盖Highcharts.Tooltip.prototype的刷新方法,并尝试访问十字准线对象以访问其attr()以在其上设置笔划。不幸的是,即使我将它设置在全局工具提示对象上,十字线对象也会返回null -

HC换行

 HC.wrap(Highcharts.Tooltip.prototype, 'refresh', function(p, point, mouseEvent) {
        p.call(this, point, mouseEvent);

        if (point && point.length > 0) {

            var crosshairs = this.crosshairs;
            if (point[0].series.name === 'series1') {
                crosshairs.attr({
                    stroke: '#222222',
                    'stroke-width': 1
                });
            } else {
                label.attr({
                    stroke: COLORS.black,
                    'stroke-width': 0
                });
            }
        } 
    });

系列中的工具提示对象 -

  tooltip: {
             crosshairs: [{
             width: 1, 
             color: COLORS.gray_1, 
             zIndex: 3
                }, false], 
}

我缺少什么?我们可以用上面的方式设计十字准线吗?提前谢谢。

修改

在下面尝试过摩根的建议,事件似乎根本不会发生。

(function (HC) {

   HC.addEvent(Highcharts.Axis, 'afterDrawCrosshair', 
      function (point) {
           if(this.cross && point) {
               this.cross.attr({
                  stroke: COLORS.red
               })
           }
   });

 })(Highcharts);

1 个答案:

答案 0 :(得分:1)

您可以在绘制十字准线后更改十字准线的笔划。您可以在轴'事件afterDrawCrosshair中执行此操作:

Highcharts.addEvent(Highcharts.Axis, 'afterDrawCrosshair', function ({ point }) {
  if (this.cross && point) {
    this.cross.attr({
      stroke: point.series.color
    })
  }
})

直播示例:http://jsfiddle.net/w6erqkpb/