读书人

Extjs chart 小结 reload-chart.js 修

发布时间: 2012-11-22 00:16:41 作者: rapoo

Extjs chart 总结 reload-chart.js 修改

最近用到 Extjs自带的 reload-chart.js

我将其例子中的代码更改成从后台读取json字符串格式的动态获取数据效果:

界面效果:

?Extjs chart 小结 reload-chart.js 修改

?

我的js代码如下:

?

?

?

Extjs 自带的 reload-chart.js

?

?

function generateData(){    var data = [];    for(var i = 0; i < 12; ++i){        data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1) * 100]);    }    return data;}Ext.onReady(function(){    var store = new Ext.data.ArrayStore({        fields: ['month', 'hits'],        data: generateData()    });        new Ext.Panel({        width: 700,        height: 400,        renderTo: document.body,        title: 'Column Chart with Reload - Hits per Month',        tbar: [{            text: 'Load new data set',            handler: function(){                store.loadData(generateData());            }        }],        items: {            xtype: 'columnchart',            store: store,            yField: 'hits',            xField: 'month',            xAxis: new Ext.chart.CategoryAxis({                title: 'Month'            }),            yAxis: new Ext.chart.NumericAxis({                title: 'Hits'            }),            extraStyle: {               xAxis: {                    labelRotation: -90                }            }        }    });});

?

读书人网 >JavaScript

热点推荐