2012-02-01 21 views
1

私はExtJs 3アプリケーションをExtJs 4に移行しています。私が変更する必要があるコンポーネントの1つは、一連の棒と線があるチャートです。過去と現在の年のデータを表示します。チャートの横には、「前年との比較」チェックボックスがあります。それがチェックされていないときは、すべての系列が表示され、非表示になっている必要があります。 ExtJs 3では、次のようにシリーズスタイルの表示/非表示を設定することでこの作業を行いました:chart.setSeriesStyles(...)。しかし、ExtJs 4ではこの機能は欠けており、私はオンデマンドでシリーズを隠すことができません。ExtJsのチャートシリーズを非表示4

var store = Ext.create('Ext.data.Store', { 
    fields: [ 
     'month','data1','data2','data3','prev_data1','prev_data2','prev_data3' 
    ], 
    proxy: { 
     type: 'ajax', 
     url: '/getmonthlystats.php' 
    } 
}); 

this.statChart = Ext.create('Ext.chart.Chart', { 
    flex: 1, 
    store: store, 
    axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     minimum: 0, 
     maximum: 100, 
     fields: [ 
      'data1', 
      'data2', 
      'data3', 
      'prev_data1', 
      'prev_data2', 
      'prev_data3' 
     ], 
     label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     }, 
     grid: true 
    },{ 
     type: 'Category', 
     position: 'bottom', 
     fields: ['month'], 
     label: { 
      rotate: { 
       degrees: 315 
      } 
     } 
    }], 
    series: [{ 
     type: 'column', 
     yField: ['data1','data2','data3'], 
     xField: 'month' 
    }, 
    { 
     type: 'line', 
     yField: 'prev_data1', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data2', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data3', 
     xField: 'month' 
    }] 
}); 

ので、ラインprev_data1、prev_data2、prev_data3は、(チェックボックスの状態に応じて)示すか、必要なときに非表示にする必要があります。 はここに私のチャートのコードです。誰もがそれを行う方法を知っていますか?

Thanx。

答えて

3

この(私のコードからのサンプル)を試してみてください:あなたはあなたのチャートで '伝説' を使用している場合、このコードはあなたのために良くなる

のExtJS 4.2.xではについて

handler: function (checkbox, checked) { 
    if (checked) 
     chart.series.getAt(index).showAll(); 
    else 
     chart.series.getAt(index).hideAll(); 
} 
+0

行を非表示にしますが、折れ線グラフのピークを示すすべての点が引き続き表示されます。 – ischenkodv

+0

よく、4.0.2で動作しますが、他のバージョンについてはわかりません。シリーズのソースコードを見てみてください。 –

+0

マーカーを非表示にするために線系列にshowMarkers:falseを設定しました。それは私にとっては大丈夫です。他の解決策は、新しいシリーズ構成のチャートを完全に再現することです。 – ischenkodv

0

を:

var chart = Ext.getCmp(chartId); 
var series = chart.series.getAt(seriesIndex); 
if (value) { 
    series.showInLegend = true; 
    series.showAll(); 
} else { 
    series.showInLegend = false; 
    series.hideAll(); 
} 
chart.redraw(); 
関連する問題