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

Show/Hide a single Line element of a series on Ext JS 4

本文关键字：系列 隐藏 单个行 元素 显示 Ext JS      更新时间：2023-09-26

我是Ext JS 4的新手，我有以下问题：

如何显示/隐藏系列的单个线条元素？

我有这个代码：

法典：

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方法，但我不明白如何使用它们。

感谢您的任何帮助！

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

在 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')）获取对它们的引用，您必须像上面显示的迭代一样以其他方式执行此操作。

相关文章：