在ExtJs 4中隱藏圖表系列

我正在將ExtJs 3應用程序遷移到ExtJs 4.我需要更改的一個組件是一個包含一系列條形和線條的圖表。它顯示以前和當前年份的數據。在圖表旁邊有一個複選框「與前一年相比」。當它檢查時，所有行系列在未被檢查時應該可見並且隱藏。在ExtJS的3我做這個任務通過設置visibility：hidden的串聯方式是這樣的：chart.setSeriesStyles（...）。但在ExtJs 4中這個功能是不存在的，我無法找到任何其他方式按需隱藏系列。這是我的圖表的代碼：在ExtJs 4中隱藏圖表系列

var store = Ext.create('Ext.data.Store', { 
    fields: [ 
     'month','data1','data2','data3','prev_data1','prev_data2','prev_data3' 
    ], 
    proxy: { 
     type: 'ajax', 
     url: '/getmonthlystats.php' 
    } 
}); 

this.statChart = Ext.create('Ext.chart.Chart', { 
    flex: 1, 
    store: store, 
    axes: [{ 
     type: 'Numeric', 
     position: 'left', 
     minimum: 0, 
     maximum: 100, 
     fields: [ 
      'data1', 
      'data2', 
      'data3', 
      'prev_data1', 
      'prev_data2', 
      'prev_data3' 
     ], 
     label: { 
      renderer: Ext.util.Format.numberRenderer('0,0') 
     }, 
     grid: true 
    },{ 
     type: 'Category', 
     position: 'bottom', 
     fields: ['month'], 
     label: { 
      rotate: { 
       degrees: 315 
      } 
     } 
    }], 
    series: [{ 
     type: 'column', 
     yField: ['data1','data2','data3'], 
     xField: 'month' 
    }, 
    { 
     type: 'line', 
     yField: 'prev_data1', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data2', 
     xField: 'month' 
    },{ 
     type: 'line', 
     yField: 'prev_data3', 
     xField: 'month' 
    }] 
});

所以，線prev_data1，prev_data2，prev_data3應該顯示還是在需要時隱藏（取決於複選框狀態）。有誰知道如何做到這一點？

Thanx。

來源

2012-02-01 ischenkodv

試試這個（從我的代碼示例）：

handler: function (checkbox, checked) { 
    if (checked) 
     chart.series.getAt(index).showAll(); 
    else 
     chart.series.getAt(index).hideAll(); 
}

來源

2012-02-02 05:49:00

它隱藏線條，但仍顯示所有表示折線圖峯的點。 – ischenkodv 2012-02-02 11:06:13

好吧，它工作在4.0.2，不知道其他版本。嘗試查看系列源代碼。 – 2012-02-02 11:30:08

我設置了showMarkers：對於線條系列來說是完全隱藏標記的false。沒關係對我來說。其他解決方案將完全用新的系列配置重新創建圖表。 – ischenkodv 2012-02-02 11:58:44

對於ExtJS的4.2.x版

如果你用 '傳奇' 與您的圖表，該代碼將更好地爲您：

var chart = Ext.getCmp(chartId); 
var series = chart.series.getAt(seriesIndex); 
if (value) { 
    series.showInLegend = true; 
    series.showAll(); 
} else { 
    series.showInLegend = false; 
    series.hideAll(); 
} 
chart.redraw();

來源

2014-04-16 22:07:43 TermiT

在ExtJs 4中隱藏圖表系列

回答

相關問題