Question

我遇到的情况是我有大量数据要显示在highcharts工具提示中。我为工具提示提供了自动滚动功能，该工具栏提供了一个滚动条，位于工具提示的最右端。现在，当我将鼠标移至工具提示的滚动条时，工具提示会淡入或指向其他工具条的工具提示。当鼠标悬停在工具提示上时，如何保持工具提示不褪色。

注意：我可以使用鼠标滚动操作进行滚动，但需要使用工具提示的滚动条。

var toolTip = [['INC0841115','INC0841232','INC0841273','INC0841281','INC0841282','INC0841291','INC0841315','INC0841329','INC0841115','INC0841232','INC0841273','INC0841281','INC0841343','INC0841351','INC0841354','INC0841356','INC0841386','INC0841392','INC0841408'],['INC0841670','INC0841700'],'0','0','0',['INC0842488','INC0842546','INC0842548','INC0841115','INC0841232','INC0841273','INC0841281','INC0842568','INC0842569','INC0842753','INC0842768'],['INC0842815','INC0842817','INC0842891','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0842897'],['INC0843582'],['INC0843792','INC0843984','INC0843997'],'0','0',['INC0844516','INC0844536','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0844819','INC0845456']];

$(function() {

Highcharts.Tooltip.prototype.hide = function() {};

$('#container').highcharts({
chart: {
    type: 'column'
},
title: {
  text: 'Sample',
  x: -20 //center
},
xAxis: {
  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
  ]
},
legend: {
  layout: 'vertical',
  align: 'right',
  verticalAlign: 'middle',
  borderWidth: 0
},
tooltip: {
  useHTML: true,
  pointFormatter: function() {
    var string = '<div class = "cDiv">';
    Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
      string += p + '</a><br>'
    })
    return "Incident<br>" + string + "</div><br />";
  }
},
series: [{
  name: 'Sample',
  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
});

工具提示滚动条的CSS

 .highcharts-tooltip>span {
   pointer-events: auto !important  
  }

 .cDiv { 
   max-height:100px;
   overflow-y:auto;
  }

这是小提琴https://jsfiddle.net/d29cy8aj/

如何在其中将鼠标悬停时保持highcharts工具提示

0 个答案: