Question

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

这显示了初始系列代码：

＆＃13;

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>'
  }]
}]

＆＃13;

Answer 1

您需要在悬停点上移动数据标签 - 可以从point.slicedTranslation

抓取移动的x，y

示例：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
    }
  },

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

1 个答案: