2

私は Ext JS 4 の初心者で、次の質問があります。

シリーズの単一の Line 要素を表示/非表示にするにはどうすればよいですか?

私はこのコードを持っています:

コード：

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.onReady(function () {

    var chart = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            style: 'background:#fff',
            animate: true,
            store: store1,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['Nome mese', 'Valore medio del magazzino budget percentuale', 'Valore medio del magazzino percentuale vs Budget','Valore medio del magazzino percentuale vs Anno Precedente'],
                title: 'Valore percentuale',
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['Nome mese'],
                title: 'Mese dell\'anno'
            }],



            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7,
                },
                axis: 'left',
                xField: 'Nome mese',
                yField: 'Valore medio del magazzino budget percentuale',
                style:{stroke: '#E5B96F'},
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    fill: '#E5B96F',
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7,
                },
                axis: 'left',
                smooth: true,


                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 25,
                    renderer: function(storeItem, item) {
                        this.setTitle(item.value[1] + ' %</span>');
                    }
                },

                xField: 'Nome mese',
                yField: 'Valore medio del magazzino percentuale vs Budget',

                style:{stroke: '#690011'},
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    fill: '#690011',
                    'stroke-width': 0,
                }
            } , {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7,
                },
                axis: 'left',
                smooth: true,

                tips: {
                    trackMouse: true,
                    width: 80,
                    height: 25,
                    renderer: function(storeItem, item) {
                        this.setTitle(item.value[1] + ' %</span>');
                    }
                },

                xField: 'Nome mese',
                yField: 'Valore medio del magazzino percentuale vs Anno Precedente',

                style:{stroke: '#690011'},

                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    fill: '#690011',
                    'stroke-width': 0,
                }
            } 
            ]

         });


    var win = Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        minHeight: 400,
        minWidth: 550,
        hidden: false,
        maximizable: true,
        title: 'Magazzini 3',
        renderTo: Ext.getBody(),
        layout: 'fit',
        tbar: [{
            text: 'Salva grafico',
            handler: function() {
                Ext.MessageBox.confirm('Conferma il download', 'Confermi di voler eseguire il download del grafico come immagine \'png\'?', function(choice){
                    if(choice == 'yes'){
                        chart.save({
                            type: 'image/png'
                        });
                    }
                });
            }
        },  ],
        items: chart
    });
});

シリーズのラインの1つを非表示にしたい。

showAll() と hideAll メソッドがあるのを見てきましたが、これらの使い方がわかりません。

助けてくれてありがとう！

4

2 に答える 2

0

実用的なサンプルを次に示します。このコードをそのまま使用するには、各シリーズにIDを割り当てる必要があります。

series: [{

            type: 'line',
            id: 'line1', // Set Id here
            highlight: {
                size: 7,
                radius: 7,
            },

..。

var chart = 'assign your chart component to this'
    chart.series.each(function(aSeries) {
         if (aSeries.id == 'line1') {
            aSeries.hideAll();
            return false;
        }
}
于 2012-06-24T13:29:16.720 に答える
0

ExtJS 4.1.x では、ライン シリーズの機能を使用して、toggleAllすべてのシリーズ要素 (マーカー、ラインなど) を表示/非表示にすることができます。toggleAllドキュメントに表示されない理由はわかりませんが、こちらのライン シリーズのソース コードで見つけることができます。

表示/非表示にするシリーズ フィールド名があれば、とても簡単です。一連のチャートを単純に反復処理し、一連のフィールドが必要なものであるかどうかを確認toggleAllしてから、ブール値パラメーターを使用して呼び出して表示または非表示にすることができます。

たとえば、myFieldが表示/非表示にするシリーズ フィールド名でありmyChart、チャートへの参照である場合:

Ext.each(myChart.series.items, function(series) {
    if (series.yField == myField) {

        // hides the series
        series.toggleAll(false);

        // shows the series
        series.toggleAll(true);
    }
});

残念ながら、チャート シリーズは のサブクラスではExt.Componentないため、ComponentQuery セレクターを使用してそれらへの参照を取得することはできませんmyChart.down('series[yField=fieldName')。

于 2012-07-21T20:33:09.837 に答える