2017-06-01 5 views
1

2行のグラフを並べて表示する状況があります。グループの最高値でグラフをソートする必要があります。これはchart.order()で実現できます。 シナリオ: -dc.js行チャートのデフォルトビューは並べ替えられていて、並べ替えは行われませんonclick

1. The initial load of the chart with sorted values. 
2. on Click of the chart, Don't need the sorting or reordering of the bar. 
Filter can apply the chart without reordering the bar position 

解決方法はありますか?

jsFiddle

+0

はよろしいですが正しいJSFですiddle? – davcs86

+0

私はそれを機能させるためにいくつかの変更を加えなければなりませんでした。 [http://fiddle.jshell.net/davcs86/ameh3qbt/3/](http://fiddle.jshell.net/davcs86/ameh3qbt/3/) – davcs86

+0

@ davcs86申し訳ありませんjsFiddleを更新しました:d http:///fiddle.jshell.net/caravinden/a7jdw5ds/ –

答えて

1

興味深い質問。私は、これを行う最も簡単な方法は、最初のレンダリングの後の値のスナップショットを取ってから、それをその後の再描画に使用することだと思います。

我々はpostRenderイベントのイベントハンドラを作成し、再利用可能な機能にこれを入れます:

function save_first_order() { 
    var original_value = {}; // 1 
    return function(chart) { 
     chart.group().all().forEach(function(kv) { // 2 
      original_value[kv.key] = kv.value; 
     }); 
     chart.ordering(function(kv) { // 3 
      return -original_value[kv.key]; 
     }); 
    }; 
} 

postRenderイベントは、(描画)のチャートが描画される最初の時間の後に解雇されました。この関数

  1. はクロージャ内の値の独自のマップを保持します:マップは、グラフのみによって影響されるであろう、レンダリングが発生したとき、それは現在の `グループからすべての値を保持する
  2. に適用されます。そのマップ内のすべての()、および
  3. は、現在の値

これは、新しい値が後に表示されていないことを、もちろん、前提としてのではなく、マップ内の値を使用するように順序付け関数を変更しますが、私は思いますあなたの質問には暗黙の前提があります。

私はそれを再利用できるように関数の中に置く、などなどの両方のチャートにそれを適用:

rowChart 
    // ... 
    .on('postRender', save_first_order()); 

は(再利用可能な機能は、クロージャを作成するために呼ばれ、それが返されていることに注意してください実際のイベントハンドラである機能)あなたのフィドルの

row chart not reordered

フォーク:。http://jsfiddle.net/gordonwoodhull/04fcvgvu/5/

+0

ありがとうございます...これは本当に感謝しています。それはcharm.:dのような仕事です –

関連する問題