顯示/隱藏在Ext JS的一系列單行元件4

Question

我很新上的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方法，但我不明白如何使用這些。

感謝您的幫助！

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選擇器獲得對它們的引用，您必須以類似上面所示的迭代的方式執行此操作。