Question

所以我的情况类似于这个小提琴 ~~http://jsfiddle.net/d15k2nyw/~~ http://jsfiddle.net/ifix/e0v4g6mx/

点击饼图应突出显示表格中的相应行，例如点击Chrome会突出显示所有使用Chrome的用户，最好使用分配给该饼的Chrome部分的颜色。

我认为这可能是

中的一部分

click: function(e) {
   $('#' + this.options.id).addClass("highlight");
},

但我的jQuery非常弱。但是，我可以想象，类名可以很容易地从数据创建“slugify”函数，jQuery从诞生开始就是互联网公民。哦，顺便说一句，我的数据是CSV格式，所以我不能用系列＆gt;做太多聪明的事情。数据

非常感谢您的帮助。

Answer 1

我已更新您的FIDDLE。添加了什么...

首先，你没有任何桌子，所以我加了一个。

然后，为了突出显示一行，您必须定义一个css类。我不想处理css所以我添加了bootstrap CDN，Bootstrap将突出显示该active类的行。在html中，您只需要使用表的引导类：

<table class="table" id="myTable">|

class属性用于bootstrap，ID将有助于将表与图表链接。

到目前为止，我们还需要将每一行与其相关值相关联。这就是为什么我在每个tr添加了一个id：

 <tr id="Microsoft">
  <td>Microsoft Internet Explorer</td>
  <td>56.33</td>
</tr>

现在，我们的HTML＆amp; css准备好了！如何在图表中使用它们？非常简单，使用您的数据添加id属性：

name: 'Proprietary or Undetectable', //The name in your chart
id: 'Proprietary', //The id
y: 0.2 //the value

添加点击事件：

events: {
   click: function (event) {
//Our jquery which will highlight the row here
   }
}

和点击功能中的jquery：

$("#myTable tbody tr:not(#" + this.id + ")").removeClass('active');
$("#myTable #" + this.id).toggleClass('active');

这里的重要部分是this。 this是单击图表某个部分时隐式给出的对象。它具有我们在系列中定义的属性：

 name: 'Proprietary or Undetectable', //The name in your chart
 id: 'Proprietary', //The id
 y: 0.2 //the value

可以在this对象中访问该ID。 Jquery将使用它来了解哪个行与点击的数据相关。

如果id与实际点击的数据不匹配，第一行将禁用突出显示，第二行将突出显示匹配的行。

作为奖励，您还可以在图表中突出显示其相对颜色的行。只需更改jquery：

即可

 // $("#users tbody tr:not(." + slugify(this.name) + ")").removeClass('active');
 $("#users tbody tr:not(." + slugify(this.name) + ")").css({'background-color': ''})
 // $("#users tbody tr." + slugify(this.name)).toggleClass('active');
 $("#users tbody tr." + slugify(this.name)).css({'background-color': this.id})
Hope it's clear :)

单击Highchart数据

1 个答案: