Question

我是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方法，但我无法理解如何使用它们。

感谢您的帮助！

Answer 1

以下是一个工作示例：您应该为每个系列分配一个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;
        }
}

Answer 2

在ExtJS 4.1.x中，您可以使用系列的toggleAll功能来显示/隐藏所有系列元素（标记，线条等）。我不知道为什么toggleAll没有显示在文档中，但可以在行系列源代码here中找到。

如果您有要显示/隐藏的系列字段名称，这很容易。您可以简单地遍历图表系列并检查系列字段是否是您想要的那个，然后使用布尔参数调用它上面的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的子类，所以你不能使用像myChart.down('series[yField=fieldName')这样的ComponentQuery选择器来获取它们，你必须像上面显示的迭代那样以其他方式来做它。

在Ext JS 4上显示/隐藏系列的单个Line元素

2 个答案: