//向此panel中add chart
var chartPanel = new Ext.Panel({
region:'east',
id:'chartPanel',
title:'统计图',
margins:'2 2 2 2',
width:390,
layout:'border',
items:[]
});
//调用chart的公共js
//柱状图
function getColumnChart(fields,series){
//分组柱状图
var columnStore = new Ext.data.JsonStore({
fields: fields
});
var columnChart = new Ext.chart.ColumnChart({
region:'center',
id:'columnChart',
hidden:true,
store: columnStore,
xField: 'text',
series: series,
extraStyle: { //Step 1
legend: { //Step 2
display: 'bottom',
font:
{
family: 'Tahoma',
size: 12
}
}
}
});
// columnStore.loadData(data);
return columnChart;
}
//饼图
function getPieChart(){
//饼图
var pieStore = new Ext.data.JsonStore({
id:'pieStore',
fields: ['text', 'sl']
});
var pieChart = new Ext.chart.PieChart({
region: 'center',
hidden:true,
id: 'pieChart',
store: pieStore,
xtype: 'piechart',
dataField: 'sl',
categoryField: 'text',
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
});
return pieChart;
}
///有俩按钮 点击后调用一个方法(一个是饼图 一个是分组柱状图)
//按钮调用方法
if(Ext.getCmp('chartPanel').items.items.length>0){
Ext.getCmp('chartPanel').removeAll(true);//移除chartPanel中的所有item
}
if(mdV=="count"){//饼图
var pieCharts = getPieChart();//调用公共方法
Ext.getCmp('pieChart').store.loadData(charJsonD);//加载现有数据
Ext.getCmp('chartPanel').add(pieCharts);//将饼图添加到panel中
Ext.getCmp('chartPanel').doLayout();//dolayout();
}else{
//调用公共方法
var columnCharts = getColumnChart(columnFields,columnSeriers);//columnFields和columnSeriers都是组织好的数据
Ext.getCmp('columnChart').store.loadData(charCmJsonDs);
Ext.getCmp('chartPanel').add(columnCharts);
Ext.getCmp('chartPanel').doLayout();//dolayout();
}
注:每次我加断点 监视的时候会出现效果图 但是不加断点了 就不出对应的效果图了。。。。