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
    });
});

我想隐藏系列的其中一条线。

我已经看到有 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 回答