0

我有以下设置：

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

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

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

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

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

4

2 回答 2

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 Legendfilter中的名称填充了数组。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带有|（管道）字符作为OR.

于 2012-07-18T18:55:53.807 回答
1

您可以将以下内容应用于回调..我认为..

$.each(chart.options.series, function(key, value){
    // filter here
}
于 2012-07-18T18:59:20.183 回答