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

最後に、

これで、HighChartsLegendfilterのの名前が配列に入力されました。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 
    }
}
...

終わり！

上で使用した正規表現は、の接着剤として（パイプ）文字を使用して配列のインプロードを使用^((?!('+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 に答える