Question

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

一次作为一个表：

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

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

Highchart将数据放入SVG路径，表数据和饼图路径的顺序相同即。制动器是第一个＆＃39; tr＆＃39;锚点和第一个饼图切片。

我想将这两者联系起来，这样当我将鼠标悬停在表格行时，它会突出显示图表切片。

使用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

//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 http://stackoverflow.com/a/11318136/1064325
            data.setState('hover');

            //Makes the tooltip for the simulated hover
            //Credits to http://stackoverflow.com/a/14650436/1064325
            chart.tooltip.refresh(data);
        });

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

            //Removes the hover event simulation on it
            //Credits to http://stackoverflow.com/a/11318136/1064325
            data.setState();

            //Makes the tooltip for the simulated hover
            //Credits to http://stackoverflow.com/a/20988150/1064325
            chart.tooltip.hide();
        });
    });
});

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

You can see a working fiddle here!

Answer 2

不要破坏你的头脑，更简单的方法就是使用angularjs（ng-table），你可以通过几个步骤制作一个复杂的表系统，查看这个链接

codepen ng-table

plnkr Pagination

希望它可以帮到你

链接表数据与图表数据Jquery

2 个答案: