突出显示（动画）来自 HTML 元素的饼图切片（鼠标悬停）

Question

我有一系列带有数据的 HTML 表格单元格 - 一个例子是：

<tr id="rrow1">
  <td>
    <a href="/electricity" class="category">Electricity</a>
  </td>
  <td>
    901.471
  </td>
</tr>

<tr id="rrow2">...
<tr id="rrow3">...
etc

在这种情况下，每个<tr>（或者对于更广泛的社区来说是一个div/span/tr/td）在while循环中被分配一个基于$rrow++;的顺序ID（在 PHP 中）。

我还有一个使用highcharts library 的Piechart，我想根据特定div/span/tr/td 的鼠标悬停来突出显示切片 (sliced: true)元素 - 在这种情况下 #rrow1 如上所述，但需要多个/迭代元素和 (sliced: false) onmouseout...

作为一个简单的例子，我尝试访问以下的各种衍生物，但失败了：

$('#rrow1').mouseover(function() {
    chart.series[0].graph.attr('sliced', true);
});

$('#rrow1').mouseout(function() {
    chart.series[0].graph.attr('sliced', false);
});

我找到的最接近的是这个，但最多是混蛋并且没有成功：

plotOptions: {
  series: {
        mouseOver: function() {
          if( $('#rrow1').mouseover )
            series.x = sliced: true;
        },
        mouseOut: function() {
          if( $('#rrow1').mouseout )
            series.x = sliced: false;
        }
      }
    }

这些远非正确，尽管搜索我找不到有效/有用的示例来工作或绘制方向。

您可以在 jsfiddle here 上查看有问题的饼图。

Answer 1

鼠标悬停动画

有一个函数可以切馅饼，你可以在每个点事件上调用它。

plotOptions: {
    series; {
        point: {
            events: {
                mouseOver: function() {
                    this.slice();
                },
                mouseOut: function() {
                    this.slice();
                }
            }
        }
    }
}

更新your chart。

从外部元素制作动画

首先，您必须确定要为哪个切片设置动画。我可以为每个slice 使用id，并在相应的html 元素上存储相同的ID。
然后可以使用chart.get(id);获取切片，调用slice函数。

像这样：
我的系列

series: [{
    type: 'pie',
    name: 'Share',
    data: [{
        name: 'Electricity',
        id: 'eletricity-slice'
    }, {
        name: 'Heating Oil',
        id: 'oil-slice'
    }, {
        name: 'Gas',
        id: 'gas-slice'
    }, {
        name: 'Other',
        id: 'other-slice'
    }]
}]

我的 HTML

<table border="1">
    <tr data-slice="eletricity-slice"><td>Electricity</td></tr>
    <tr data-slice="oil-slice"><td>Heating Oil</td></tr>
    <tr data-slice="gas-slice"><td>Gas</td></tr>
    <tr data-slice="other-slice"><td>Other</td></tr>
</table>

这样我就知道哪个元素切了哪个点。然后我只需要绑定事件。

$('table').on('mouseover mouseout', 'tr', function() {
    var sliceId = $(this).data('slice'); // get data attr which contais the id
    animateSlice(chart.get(sliceId));    // pass slice point as parameter
});

我创建了函数animateSlice 来为我想要的切片设置动画，因此您也可以从图表事件中调用它，例如：

mouseOver: function() {
    animateSlice(this);
},
mouseOut: function() {
    animateSlice(this);
}

这是animateSlice函数：

function animateSlice(point) {
    point.slice();
}

所以，这里是the result。