Jquery 单击Highchart数据时高亮显示html表中的相对行

所以我有一个类似于小提琴的情况

单击饼图应突出显示表中的相应行，例如单击Chrome将突出显示所有使用Chrome的用户，理想情况下使用分配给饼图中Chrome部分的颜色

我想这可能是一系列

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

但是我的jQuery非常弱。然而，我可以想象，使用一个“slugify”函数可以很容易地从数据中创建类名，jQuery从诞生之日起就是互联网公民。哦，顺便说一句，我的数据是CSV格式的，所以我不能用series>data做太多聪明的事情

非常感谢您的帮助。

我已经更新了您的信息。 添加的内容

首先，你没有桌子，所以我加了一张

然后，为了突出显示一行，您必须定义一个css类。我不想处理css，所以我添加了Bootstrap，它将用它的

活动类突出显示该行。在html中，您只需对表使用引导类：

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

现在，我们的html和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'); 

这里最重要的部分是
这个
<代码>此

是当您单击图表的一部分时隐式给出的对象。它具有我们在系列中定义的特性：

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

该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 :)

我已经更新了你的密码。 添加的内容

首先，你没有桌子，所以我加了一张

然后，为了突出显示一行，您必须定义一个css类。我不想处理css，所以我添加了Bootstrap，它将用它的

活动类突出显示该行。在html中，您只需对表使用引导类：

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

现在，我们的html和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'); 

这里最重要的部分是
这个
<代码>此

是当您单击图表的一部分时隐式给出的对象。它具有我们在系列中定义的特性：

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

该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 :)

---

你们哪里有桌子？显然我贴了一个未保存草稿的链接。这是正确的一个：你在哪里有桌子？显然我发布了一个未保存草稿的小提琴链接。这是正确的一个：非常感谢！这是一个良好的开端。为张贴错误的小提琴致歉。。。情况有点复杂：行不能是id，而是class，因为需要突出显示更多的行。我也不能编辑序列数据，它们是CSV格式的。但是我想知道类名是否可以来自“this”-例如，如果this.name将返回切片的名称，那么我可以“sluggif”字符串（例如“microsoft internet explorer”），然后将其用作行的类名（我使用PHP或.NET构建，因此在那里添加类没有问题）。@JosefHabr，有些事情我不明白。即使您的数据来自csv或其他，您也希望显示html表，因此您必须对其进行编码，不是吗？您只需在html中添加id（不在csv中）。你可以使用name属性，但是一个名字可以有一个空格，这就是为什么我认为

id

更合适你实际上给了我一个非常正确的方向，非常感谢！请看最后一把小提琴，-并再次为错误的小提琴道歉。不，我不能使用ID，因为它们必须是唯一的，但我能够slugify（this.name）并切换适当的类。@JosefHabr不客气。看来你的小提琴演奏得很好：）。既然你是新来的，请别忘了标出对解决问题最有帮助的答案。如果你不知道如何做，也可以看看接受答案是如何工作的：谢谢！我自己试过了，发现了这个。颜色确实有用。还是我遗漏了什么？非常感谢你！这是一个良好的开端。为张贴错误的小提琴致歉。。。情况有点复杂：行不能是id，而是class，因为需要突出显示更多的行。我也不能编辑序列数据，它们是CSV格式的。但是我想知道类名是否可以来自“this”-例如，如果this.name将返回切片的名称，那么我可以“sluggif”字符串（例如“microsoft internet explorer”），然后将其用作行的类名（我使用PHP或.NET构建，因此在那里添加类没有问题）。@JosefHabr，有些事情我不明白。即使您的数据来自csv或其他，您也希望显示html表，因此您必须对其进行编码，不是吗？您只需在html中添加id（不在csv中）。你可以使用name属性，但是一个名字可以有一个空格，这就是为什么我认为

id

更合适你实际上给了我一个非常正确的方向，非常感谢！请看最后一把小提琴，-并再次为错误的小提琴道歉。不，我不能使用ID，因为它们必须是唯一的，但我能够slugify（this.name）并切换适当的类。@JosefHabr不客气。看来你的小提琴演奏得很好：）。