Highcharts - 当饼图在悬停时移动时，如何在每个饼图内移动图标？

debugcn 发表于 Dev

西米丹达

我有一个饼图，它有一个图标（定义类和定位的 html 标签）。当您将鼠标悬停在每个饼图切片上时，切片正确移出但图标固定在该位置。有没有办法移动图标？

这是显示初始系列代码：

series: [{
  type: 'pie',
  color: '#FFFFFF',
  data: [{
    name: '<h3>Scheduling</h3>',
    y: 60,
    icon: '<i class="fa fa-book" style="cursor:pointer;font-size:80px;margin:-20px;"></i>'
  }]
}]

摩根弗里

您需要移动悬停点上的数据标签 - 可以从中抓取移动的 x、y point.slicedTranslation

示例：https : //jsfiddle.net/036j2uLs/

在鼠标悬停时，您需要在与切片相同的方向上为该点设置动画。

         mouseOver: function(event) {
        var point = this;

        if (!point.selected) {
          timeout = setTimeout(function() {
            const label = point.dataLabel;
            point.firePointEvent('click');

            point.series.points.forEach(point => {
              const label = point.dataLabel;
              if (label.sliced) {
                label.animate({
                  x: label.originX,
                  y: label.originY
                });
                label.sliced = false;
              }
            });

            if (!label.sliced) {
              const {
                translateX: tx,
                translateY: ty
              } = point.slicedTranslation;

              label.animate({
                x: label.originX + tx,
                y: label.originY + ty
              });
              label.sliced = true;
            }

            chart.tooltip.shared = false;
            chart.tooltip.refresh(point);
          }, 0);
        }
      }
    }

在加载/重绘时记录原始数据标签位置：

function setLabelOrigins() {
  this.series[0].points.forEach(point => {
    const label = point.dataLabel;
    label.originX = label.x;
    label.originY = label.y;
  });
}

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'modules',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie',
    backgroundColor: "transparent",
    events: {
      load: setLabelOrigins,
      redraw: setLabelOrigins
    }
  },

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。