Jquery 基于HighChart图例切换数据表行

我有以下设置：

HighChart Graph
--------------------

DataTable Header
Month             | Day       | Total   | etc
----------------------------------------
June              |     2     | 10      | ...
June              |     5     | 20      | ...
July              |    29     | 10      | ...
Aug               |     1     | 30      | ...

我图表上的系列标题为月份

我想做的是，当切换图例时，它将隐藏与单击序列匹配的行

---

问题是，如何将HighChart回调与DataTables的过滤器集成？

在这个答案中，我假设变量

dataTable

与dataTable对象的变量相等

首先，

让我们从HighCharts设置回调

...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 // Filters Go Here
            }
       },
       showInLegend: true 
    }
}
...

其次，

我们将更进一步，在切换系列时添加detect：

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     // Add Action Here
                 }
                 // Series was Hidden, Now Visible
                 else{
                     // Add Action Here
                 }
            }
       },
       showInLegend: true 
    }
}
...

第三,

我们现在知道了该系列的切换时间。我们可以检测出它们来自哪个州，正在走向哪个州。我们不打算为数据表设置过滤器

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     filter.push(this.name);
                 }

                 // Series was Hidden, Now Visible
                 else{
                     var series = this.name;
                     $.each(filter, function(k, v){
                         if(v != series){
                             tmp.push(v);
                         }
                     });

                     filter = tmp;
                 }
            }
       },
       showInLegend: true 
    }
}
...

最后，

现在我们有了

过滤器

数组，其中填充了HighCharts图例中的

系列

的名称。我们需要获取这个数组，并将其应用于过滤器

filters = []; // Set this inside your $(document).ready(function(e) {
...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                  tmp = [];

                 // Series was Visible, Now Hidden
                 if(this.visible){
                     filter.push(this.name);
                 }

                 // Series was Hidden, Now Visible
                 else{
                     var series = this.name;
                     $.each(filter, function(k, v){
                         if(v != series){
                             tmp.push(v);
                         }
                     });

                     filter = tmp;
                }

                regex = (filter.length > 0 ? '^((?!('+filter.join('|')+')).)*$' : "");

                dataTable.fnFilter(
                    regex,
                    0, // set this to your column index
                    true
                );
            }
       },
       showInLegend: true 
    }
}
...

完成

---

上面使用的正则表达式，

^（（？！（'+filter.join（'|'）+'））*$

将执行一个负前瞻，使用

过滤器

数组的

（管道）字符作为

或
的粘合剂
 您可以对回调应用以下内容。。我想

$.each(chart.options.series, function(key, value){
    // filter here
}