Question

我有以下设置：

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

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

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

我想要做的是，当切换图例时，它会隐藏与点击的系列匹配的行。

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

Answer 1

在这个答案中，我假设变量dataTable等于DataTable对象的变量。

<强>首先，

让我们设置HighCharts的回调。

...
plotOptions: {
    spline: {
       events: {
            legendItemClick: function () {
                 // Filters Go 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){
                     // Add Action Here
                 }
                 // Series was Hidden, Now Visible
                 else{
                     // Add Action Here
                 }
            }
       },
       showInLegend: true 
    }
}
...

第三，

我们现在知道这个系列什么时候被切换了。我们可以检测他们来自哪个州以及他们要去哪个州。我们不打算为DataTables设置过滤器。

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 Legend中的filter名称填充series数组。我们需要获取此数组，并将其应用于过滤器。

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 
    }
}
...

完成！

上面使用的RegEx，^((?!('+filter.join('|')+')).)*$会对filter数组的内爆以及|（管道）字符作为{{1的粘合剂 - 执行负前瞻}}。

Answer 2

你可以将以下内容应用于回调..我想..

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

基于HighChart Legend切换DataTable行

2 个答案: