Highcharts - 使用点击事件的工具提示并非始终出现

时间:2016-07-18 19:13:03

标签: javascript highcharts

我正在使用自定义代码在Highchart中显示工具提示。代码bellow大部分时间都可正常工作,但在某些情况下,当用户点击serie(line)之外时,工具提示不会再出现。

events: {     
           load: function(){
                  this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);                    
                           }
        },
 plotOptions: {
            series: {
                stickyTracking: false,
                events: {
                    click: function(evt) {
                        this.chart.myTooltip.refresh(evt.point, evt);
                    },
                    mouseOut: function() {
                        this.chart.myTooltip.hide();
                    }                       
                }

            }
        }

有没有办法避免这种错误行为?

如何重现问题:

  • 点击行内的一个点(图表会正确显示工具提示)

  • 点击选区范围之外。

  • 再次点击同一点。你不会得到工具提示。 (点击事件未被触发)。

代码可在此处找到:http://jsfiddle.net/rolandomartinezg/cuhvjqcq/

更新:看起来它是Higchart的默认行为: 我创建了一个新的示例,不使用任何自定义代码的工具提示(tooltip enabled:false)...并且系列中一个点的选择与上面的示例相同。 怎么看:

  • 将鼠标移到一点

  • 将鼠标移出点

  • 再次将鼠标移到同一个点。

结果:不会再次选择该点。选择相同点的唯一方法是将鼠标移动到另一个点并再次向后移动鼠标。请参阅此处的示例:http://jsfiddle.net/rolandomartinezg/pnm3bu14/

1 个答案:

答案 0 :(得分:1)

您可以在Highcharts github上找到有关此问题的信息:

https://github.com/highcharts/highcharts/issues/5491

在这个主题上,您可以找到PawełFus的问题解决方法:

point: {
   events: {
      mouseOut: function () {
         this.series.chart.pointer.prevKDPoint = null;
      }
   }
}

在这里,您可以找到具有此解决方法的图表示例: http://jsfiddle.net/vh2uer6n/5/