1

我有一系列带有数据的 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都被分配一个基于while循环（在PHP中）的顺序ID tr。td$rrow++;

我还有一个使用 highcharts 库的饼图，我想突出显示sliced: true基于特定 /// 元素的 onmouseover 的切片 () div-在这种情况下如上所述，但需要多个/迭代元素和 ( span) onmouseout.. .trtd#rrow1sliced: false

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

$('#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 上查看有问题的饼图。

4

1 回答 1

3

鼠标悬停动画

有一个切馅饼的功能，您可以在每个点事件上调用它。

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

更新了您的图表。

从外部元素制作动画

首先，您必须确定要为哪个切片设置动画。Iou 可以使用idfor each来做到这一点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();
}

所以，这里是结果。

于 2012-12-14T03:18:50.383 回答