ExtJS 4.1 - Pie chart refresh

I have some problem with pie charts on ExtJS 4.1. I load by Ajax and Json the datastore: Ext.define('MyModel', { extend: 'Ext.data.Model', fields: ['status', 'data', 'data1', 'data2'] }); var store1 = Ext.create('Ext.data.JsonStore', { model: 'MyModel', proxy: { type: 'ajax', url : 'PieChartJsonServlet', }, autoLoad: true }); I would like to display pie charts representing: 1) data by status 2) data1 by status 3) data2 by status To display each pie chart, I click on buttons from tbar on a panel. When I load HTML page, the first chart (data by status) is correctly loaded and display. My problem is after clicking on buttons from tbar, data seem to be loaded but pie chart doesn't refresh! (When I highlight slices, I display loaded data and I see data are well loaded) My code: Ext.require('Ext.chart.*'); Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']); Ext.require('Ext.JSON.*'); Ext.onReady(function () { Ext.define('MyModel', { extend: 'Ext.data.Model', fields: ['status', 'data', 'data1', 'data2'] }); var store1 = Ext.create('Ext.data.JsonStore', { model: 'MyModel', proxy: { type: 'ajax', url : 'PieChartJsonServlet', }, autoLoad: true }); var titlePieChart = 'Data by status', dataToDisplay = 'data', highlightToDisplay = ' data', chart = Ext.create('Ext.chart.Chart', { xtype: 'chart', animate: true, store: store1, shadow: true, legend: { position: 'right' }, insetPadding: 60, theme: 'Base:gradients', items: [{ type : 'text', text : titlePieChart, font : '18px Arial', width : 100, height: 30, x : 155, y : 30 }], series: [{ type: 'pie', field: dataToDisplay, showInLegend: true, tips: { trackMouse: true, width: 180, height: 35, renderer: function(storeItem, item) { var total = 0; store1.each(function(rec) { total += rec.get(dataToDisplay); }); this.setTitle(storeItem.get('status') + ' : ' + storeItem.get(dataToDisplay) + highlightToDisplay + '\n(' + Math.round(storeItem.get(dataToDisplay) / total * 100) + '%)'); } }, highlight: { segment: { margin: 20 } }, label: { field: 'status', display: 'rotate', font: '18px Arial', } }] }); var panel1 = Ext.create('widget.panel', { width: 600, height: 500, renderTo: 'chartCmp', layout: 'fit', tbar: [{ text: 'Data', handler: function(button, evt) { titlePieChart = 'Data by status', dataToDisplay = 'data'; highlightToDisplay = ' data', chart.refresh(); // Doesnt' work ! } }, { text: 'Data 1', handler: function(button, evt) { titlePieChart = 'Data1 by status', dataToDisplay = 'data1'; highlightToDisplay = ' data1', chart.refresh(); // Doesnt' work ! } }, { text: 'Data 2', handler: function(button, evt) { titlePieChart = 'Data2 by status', dataToDisplay = 'data2'; highlightToDisplay = ' data2', chart.refresh(); // Doesnt' work ! } }], items: chart }); }); Each line "chart.refresh();" from tbar doesn't work whereas I would like a refreshed chart. For information, I use ExtJS 4.1 on java web application.
I finally found the solution. Few minutes ago, I added this line for each button : chart.series.first().field = dataToDisplay, and the chart is refreshed.

以上就是ExtJS 4.1 - Pie chart refresh的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏