页面代码如下:
<script type="text/javascript">
Ext.onReady(function() {
//创建一个Store
var store = Ext.create('Ext.data.JsonStore', {
fields : ['date','price1','price2','price3','price4'],
proxy:{
type:'ajax',
url:'chartSearch',
reader:{
type:'json'
}
}
});
//创建图表对象
var monthHistogram = Ext.create('Ext.panel.Panel', {
renderTo : Ext.getBody(),
title : '价格统计图',
border:false,
tbar : [ '时间',{
xtype:'combo',
format:'Y-M',//显示类型
name:'month',
id:'month',
store:['2013-07','2013-08','2013-09','2013-10','2013-11','2013-12','2014-01'],
emptyText:'2013-12',
editable : false
},'银行类别:', {
xtype : 'combo',
name : 'bankType',
id : 'bankSearch',
store : ['国股','北上南宁','省会城商','全国城商','外资','农商农合','信用社村镇'],
emptyText:'国股',
editable : false
}, '-', {
text : '查询',
handler : function() {
store.load({
params : {
'month':Ext.getCmp('month').getValue(),
'bankType' : Ext.getCmp('bankSearch').getValue()
}
});
}
} ],
items :{
xtype:'chart',
store : store,
axes : [ {//定义坐标轴
title : 'Price', //纵轴标题
type : 'Numeric',
position : 'left',
fields : [ 'price' ],
majorTickSteps:15,
minorTickSteps:1
}, {
title : 'Time',
type : 'Time',
position : 'bottom',
fields : [ 'date' ],
dateFormat : 'd'
} ],
series : [ {
type : 'line',
displayName : '小票买断价',
xField : 'date',
yField : 'price1',
style : {
color : 0xCCFF00
}
}, {
type : 'line',
displayName : '大票买断价',
xField : 'date',
yField : 'price2',
style : {
color : 0xCC0000
}
}, {
type : 'line',
displayName : '当天出款价',
xField : 'date',
yField : 'price3',
style : {
color : 0x0033FF
}
}, {
type : 'line',
displayName : '带票价',
xField : 'date',
yField : 'price4',
style : {
color : 0x66CC00
}
} ]
}
});
store.load({
params : {
'month':'2013-12',
'bankType' : '国股'
}
});
})
</script>
后台取到json数据格式如下:
[{"date":1,"price1":"","price2":6.12,"price3":"","price4":""},{"date":2,"price1":"","price2":6.12,"price3":"","price4":6},
{"date":3,"price1":"","price2":6.08,"price3":"","price4":5.92},
{"date":4,"price1":"","price2":6.08,"price3":"","price4":""},...余下省略]
页面实现效果如图:
求教,我的页面中哪里出现了错误,为什么有数据了,但是折线图还是显示不出来??
- 大小: 10.4 KB
分享到:
相关推荐
ExtJS 折线图 lineChart,前台的内容由后台传入,可支持任意多条折线图。
Extjs 统计图 饼图 直方图 和折线图
NULL 博文链接:https://mzl-2011.iteye.com/blog/1035567
该demo适用于生成动态的折线图,而且是x,y两个维度的动态,如果想修改成一个维度更简单。本例子经过本人亲测通过,保证能使用! 或者查看帖子:http://www.itxiu.net/javascript/20161231/219.html
EXTJS 折线 chart action 代码示例 1.远程加载数据(两种方法) 2.本地加载数据 3.完整示例,实例 4.后台为JAVA代码
NULL 博文链接:https://llyilo.iteye.com/blog/2257344
本文实例讲述了extjs4图表绘制之折线图实现方法。分享给大家供大家参考,具体如下: 本篇文章将介绍extjs中自带的图表 在本次案例中,提供一下功能: 1.从后端请求数据并运用到图表中,形成动态数据。 2.查询出每年...
主界面:extjs/jasper/pillars.jsp 最近研究了ireport画图形的功能,感觉中间走了很多歪路。想大家不要在重复走别人走过的歪路特此上传源码,供大家参考。还有我用的是oracle数据库 作者:castiel
Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果Extjs图片渲染效果
NULL 博文链接:https://luoyu-ds.iteye.com/blog/1741271
EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形EXTJS, 图形
最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵
Extjs 下拉菜单实现拼音输入进行检索
eclipse的Extjs的图形化开发插件,实用性比较强
storebar extjs通过store实现toolbar
extJs 跟mxgraph一样都是一种前台框架,可以混着用,这个例子将结合extjs + mxgraph 做网络拓扑图。mxgraph是将html的页面元素当做一个容器(container),并在此容器中画图的,而extJs也是将此容器包装成一个window...
里面有许多我们所用的16*16的extjs-ico图片,还有24*24的图片。都是png格式。
ExtJs +Echart 实现桑基图绘制,包括前端页面搭建,后端数据赋值,桑基图数据绑定,桑基图Json后台格式定义,Json格式转换到前台接收等,下载后如果右运行不了,请加群,备注ExtJs桑基图代码,如果好用,请给五分...
Extjs 批量上传图片,选择多个图片可批量删除操作,