2

だから私はパネル内にチャートを持っています。パネルには 2 つのタブがあります。最初のタブにはグラフが含まれています。2 番目のタブには、グラフのデータをフィルター処理するために使用している小さなフォームが含まれています。

私のフィルタリング フォームは非常にシンプルです。「7 日間」、「30 日間」などのさまざまな期間が含まれており、選択すると、グラフのデータを生成している場所に (ajax を使用して) ユーザーの選択が送信されます。

それは素晴らしいことです...しかし、どうすればチャートを更新できますか?! ユーザーは必要なオプションを選択できますが (スクリプトがデータを取得してクエリを変更していることはわかっています)、グラフは決して変更されません。再描画または更新を使用することになっていると思います。

これが私が考えていることです: 再描画/更新をフォームハンドラーに追加すると、次のようになります

        xtype: 'radiofield',
        name: 'timespan',
        id: 'radio3',
        inputValue: 30,
        boxLabel: '30 days',
        handler: function(checkbox, checked) {
           if (checked ) {
              console.log(checkbox.inputValue);
              **HERE**
            }
        }

質問:ユーザー アクションで EXTJS チャートを更新するにはどうすればよいですか?

4

2 に答える 2

3

私はそれを考え出した！これが私がしたことです：

これは、私のラジオ ボタンの 1 つのハンドラー (上から) です。ボタンがチェックされている場合は、チャートのストアをリロードします。ハードコーディングされたデータを渡す代わりに、filteredData という名前の関数を作成しました。この関数は ajax を使用して、そのグラフのデータを特定の形式で生成します。関数で使用するために、チェックした値 (変数名 'value) をパラメーターとして送信します。 

handler: function(checkbox, checked) {
    if (checked ) { //refreshes the chart with new data
        var chart = this.ownerCt.ownerCt.ownerCt.getComponent('dataTab').getComponent('graph');
        var chartCmp = chart.getComponent('chartCmp'); //actual chart (used to redraw)
        var value = checkbox.inputValue; //checked value


        chart.store.loadData(filteredData(value));
        chartCmp.redraw();
    }}

ストアが更新されたら、チャートを再描画します。

store.load自分が必要だと気づいていなかった非常に重要な部分でした。

シンプルです ;)

于 2012-09-13T18:23:08.777 に答える
1

ExtJS 3.4.0 では、

Ext.getCmp('chartCmp').refresh();

于 2012-09-22T09:44:33.703 に答える