Link table 带有图表数据的数据 Jquery

Question

我有一些数据以两种方式显示。

曾作为table:

<table>
  <tbody>
    <tr>
      <td>Brakes</td>
      <td>34%</td>
    </tr>
    <tr>
      <td>Headlights</td>
      <td>12%</td>
    </tr>
  </tbody>
</table>

还有一次作为饼图（使用 Highchart 生成）。

Highchart 将数据放入 SVG 路径中，table 数据和饼图路径的顺序相同，即。 Brakes 是第一个 'tr' 锚点和第一个饼图切片。

我想 link 这两个，这样当我将鼠标悬停在 table 行时，它会突出显示图表切片。

使用 Jquery/javascript 执行此操作的最佳方法是什么？

到目前为止我有以下内容：

$(function(){
  var tr = $('table tr') // to get an array of the table rows
  var p = $('path') // to get an array of the paths


  // Sorry for my naivety but I am not too sure where to go beyond this point.

});

如能提供任何帮助，我们将不胜感激！

Answer 1

不要为此伤脑筋，一个更简单的方法是使用 angularjs (ng-table)，你可以在很少的时间内制作出 table 的复杂系统步骤，检查此链接

codepen ng-table

plnkr Pagination

希望对您有所帮助

Answer 2

//Considering that you might have more than one pair of table-chart,
//get the list of tables, and iterate over the charts.
var tables = $('table');
$.each(Highcharts.charts, function(chartIdx, chartElement) {

    //Get the current chart
    var chart = Highcharts.charts[chartIdx];

    //Get the current rows
    var rows = $(tables[chartIdx]).find('tr');

    //Iterate over each row
    rows.each(function(idx, element) {

        //Get the chart serie (assuming there is only one)
        var serie = chart.series[0];

        //Get the chart data corresponding to this row
        var data = serie.data[idx];

        //Attach mouseover event to it
        $(this).on('mouseover', function(event) {

            //Simulates the hover event on it, as a way to highlight it
            //Credits to 
            data.setState('hover');

            //Makes the tooltip for the simulated hover
            //Credits to 
            chart.tooltip.refresh(data);
        });

        //Attach mouseleave event to it
        $(this).on('mouseleave', function(event) {

            //Removes the hover event simulation on it
            //Credits to 
            data.setState();

            //Makes the tooltip for the simulated hover
            //Credits to 
            chart.tooltip.hide();
        });
    });
});

确保在创建图表后执行此代码。

You can see a working fiddle here!

Link table 带有图表数据的数据 Jquery

Link table data with chart data Jquery

javascript

jquery

algorithm

dom

highcharts