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）都会被分配一个顺序ID基于while循环中的$rrow++;（在PHP中）。

我还有Piechart使用highcharts library，我想基于特定sliced: true / {{1的onmouseover突出显示切片（div） }} / span / tr元素 - 在这种情况下td如上所述，但多个/迭代元素根据需要和（#rrow1）onmouseout ...

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

sliced: false

我发现的最近的是这个，但最多是卑鄙的，没有成功：

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

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

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

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

Answer 1

鼠标悬停动画

有一个功能可以分割馅饼的平和性，你可以在每个点事件上调用它。

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

更新了your chart。

来自外部元素的动画

首先，您必须确定要制作动画的切片。你可以使用id为每个slice执行此操作，在相应的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。

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

1 个答案: