var zxstore = new Ext.data.JsonStore({
fields:['name', 'visits', 'views'],
data: [
{name:'Jul 07', visits: 245000, views: 300000},
{name:'Aug 07', visits: 240000, views: 350000},
{name:'Sep 07', visits: 355000, views: 400000},
{name:'Oct 07', visits: 375000, views: 420000},
{name:'Nov 07', visits: 490000, views: 450000},
{name:'Dec 07', visits: 495000, views: 580000},
{name:'Jan 08', visits: 520000, views: 600000},
{name:'Feb 08', visits: 620000, views: 750000}
]
});
// extra extra simple
var ndtjPanel = new Ext.Panel({
title: '仪器状态折线图',
// renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: zxstore,
url: BasicUrl + '/ext/resources/charts.swf',
xField: 'name',
// yField: 'visits',
series:[
{type:'line',displayName:'真实值1',yField:'visits',style:{color:0x0033FF}},
{type:'line',displayName:'其他',yField:'views',style:{color:0x66CC00}}
],
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
},
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
效果图如下:
之后 需要动态的确定折线的条数.
做了稍许改动.仅供参考.笨人的笨办法 呵呵.
后台代码
@RequestMapping(method = RequestMethod.POST, params = "cmd=getConditionListZheXian" )
public String getConditionList( Model model , HttpServletRequest request , HttpServletResponse response){
List<Map> records = new ArrayList<Map>();
Map map00 = new HashMap();
map00.put("name", "0月");
map00.put("num1" , 3500);
map00.put("num2" , 3000);
map00.put("num1name" , "CAXX");
map00.put("num2name" , "BAXX");
Map map1 = new HashMap();
map1.put("name", "一月");
map1.put("num1" , 3500);
map1.put("num2" , 3000);
map1.put("num1name" , "CAXX");
map1.put("num2name" , "BAXX");
Map map2 = new HashMap();
map2.put("name", "二月");
map2.put("num1" , 2000);
map2.put("num2" , 1500);
map2.put("num1name" , "CAXX");
map2.put("num2name" , "BAXX");
Map map3 = new HashMap();
map3.put("name", "三月");
map3.put("num1" , 1500);
map3.put("num2" , 2000);
map3.put("num1name" , "CAXX");
map3.put("num2name" , "BAXX");
Map map4 = new HashMap();
map4.put("name", "四月");
map4.put("num1" , 3500);
map4.put("num2" , 3000);
map4.put("num1name" , "CAXX");
map4.put("num2name" , "BAXX");
Map map5 = new HashMap();
map5.put("name", "五月");
map5.put("num1" , 4500);
map5.put("num2" , 4000);
map5.put("num1name" , "CAXX");
map5.put("num2name" , "BAXX");
records.add(map00);
records.add(map1);
records.add(map2);
records.add(map3);
records.add(map4);
records.add(map5);
model.addAttribute("root", records);
}
前台主要JS函数:
/**
* 折线store
*/
var storeZheXian = new Ext.data.Store({
url : BasicUrl + "/InstrumentCondition.htm?cmd=getConditionListZheXian",
reader : new Ext.data.JsonReader({
fields:['name','num0','num0name','num1','num1name','num2','num2name','num3','num3name','num4','num4name','num5','num5name'],
root : "root"
}),
// autoLoad:true,
remoteSort : true
,listeners :{
load : function(){
var recordcount = storeZheXian.getCount();
//配置折线图
var series = new Array();
if(recordcount > 0){
var record = storeZheXian.getAt(0);
var num0 = record.get('num0');
if( num0 != null && num0 != '' && num0 != ' ' + num0 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num0name');
ser.yField = 'num0';
ser.style = {color:0xCC0000};
series.push(ser);
}
var num1 = record.get('num1');
if( num1 != null && num1 != '' && num1 != ' ' + num1 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num1name');
ser.yField = 'num1';
ser.style = {color:0xFFCC00};
series.push(ser);
}
var num2 = record.get('num2');
if( num2 != null && num2 != '' && num2 != ' ' + num2 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num2name');
ser.yField = 'num2' ;
ser.style = {color:0x99CC00};
series.push(ser);
}
var num3 = record.get('num3');
if( num3 != null && num3 != '' && num3 != ' ' + num3 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num3name');
ser.yField = 'num3';
ser.style = {color:0x0033FF};
series.push(ser);
}
var num4 = record.get('num4');
if( num4 != null && num4 != '' && num4 != ' ' + num4 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num4name');
ser.yField = 'num4';
ser.style = {color:0x66CC00};
series.push(ser);
}
var num5 = record.get('num5');
if( num5 != null && num5 != '' && num5 != ' ' + num5 != undefined ){
var ser = {};
ser.type = 'line';
ser.displayName = record.get('num5name');
ser.yField = 'num5';
ser.style = {color:0xCCFF00};
series.push(ser);
}
}
Ext.getCmp("charID").setSeries(series);
}
}
});
// 折线图空间存放在 panl 里面
var ndtjPanel = new Ext.Panel({
title: '仪器状态折线图',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
id: 'charID',
store: storeZheXian,
url: BasicUrl + '/ext/resources/charts.swf',
xField: 'name',
//这里注释了在加载store的时候 动态赋值
// yField: 'visits',
// series:[
// {type:'line',displayName:'真实值1',yField:'views',style:{color:0x0033FF}},
// {type:'line',displayName:'其他',yField:'visits',style:{color:0x66CC00}}
// ],
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
},
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
效果图如下:
小结: 由于项目任务比较赶,所以比较粗糙,仅供参考. 这里折线的数组 series 在 store加载完成之后 进行动态赋值. 其实 fields 也可以动态给值,但是 时间紧没有去弄,我这里实现了 前台显示1 - 6 条折线的功能.