Highcharts -始终在单个切片上保持悬停状态

bqucvtff  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(140)

这可能很有挑战性。所以我的目标是,如果其他切片没有悬停,则第一个最大的切片总是处于悬停状态。悬停意味着其他切片在悬停时会褪色和晕圈。我添加了代码,在圆环图的中间添加了工具提示,并在鼠标退出和加载时显示第一个切片的工具提示。我使用了工具提示延迟技巧来保持工具提示在那里。我几乎完成了,但还不能“I don“我不知道如何保持切片上的光环和其他切片褪色。这可能听起来很混乱,但希望这些我想要的图像能有所帮助。
一个障碍是我放置这个的环境不允许我使用css或者highcharts主函数之外的函数,这就是为什么所有的函数都在里面的原因。
https://jsfiddle.net/sabdorhx/1/

events: {
  load: function() {
    var chart = this,
      legend = chart.legend,
      point = chart.series.chart;

    // starte with first slice hovered
    chart.series[0].points[0].onMouseOver();

    // Legend hover show tooltip
    for (var i = 0, len = legend.allItems.length; i < len; i++) {
      (function(i) {

        var item = legend.allItems[i].legendItem;
        item.on('mouseover', function(e) {
          //show custom tooltip here
          chart.tooltip.refresh(chart.series[0].points[i]);

        }).on('mouseout', function(e) {
          //show first slice tooltip on mouse out
          chart.tooltip.refresh(chart.series[0].points[0]);
        });
      })(i);
    }
  },
}

_

series: {
  events: {
    mouseOut: function() {
    //mouse out of slice and show first slice
      this.points[0].onMouseOver();
    },
  },

第一次

jvlzgdj9

jvlzgdj91#

设置的悬停状态会在稍后调用的setState系列方法中被覆盖。在您的示例中,该函数是冗余的,因此您可以覆盖它:

Highcharts.Series.prototype.setState = function(){};

现场演示:https://jsfiddle.net/BlackLabel/z2fqre5d/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.Point#onMouseOver

相关问题