extjs常见的三种统计图
来源:互联网 发布:js设置td字体颜色 编辑:程序博客网 时间:2024/06/18 04:04
Ext.onReady(function() {
Ext.chart.Chart.CHART_URL = "../extjs/resources/charts.swf";
//定义ColumnModel
var store = new Ext.data.JsonStore( {
fields : [ 'name', 'visits', 'views' ],
data : [ {
name : '日本',
visits : 245000,
views : 3000000
}, {
name : '韩国',
visits : 240000,
views : 3500000
}, {
name : '泰国',
visits : 300000,
views : 2000000
}, {
name : '伊朗',
visits : 375000,
views : 3200000
}, {
name : '法国',
visits : 590000,
views : 3500000
}, {
name : '德国',
visits : 395000,
views : 6800000
}, {
name : '中国',
visits : 580600,
views : 8500000
} ]
});
//柱状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});
//折叠图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container1',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'linechart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});
//饼状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container2',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'piechart',
store : store,
categoryField : 'name',
dataField : 'visits',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
},
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});![](http://img.blog.csdn.net/20170213100643320?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmF2YV93YWl0dG9mb3J5b3U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20170213100651148?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmF2YV93YWl0dG9mb3J5b3U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20170213100657203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSmF2YV93YWl0dG9mb3J5b3U=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
});
Ext.chart.Chart.CHART_URL = "../extjs/resources/charts.swf";
//定义ColumnModel
var store = new Ext.data.JsonStore( {
fields : [ 'name', 'visits', 'views' ],
data : [ {
name : '日本',
visits : 245000,
views : 3000000
}, {
name : '韩国',
visits : 240000,
views : 3500000
}, {
name : '泰国',
visits : 300000,
views : 2000000
}, {
name : '伊朗',
visits : 375000,
views : 3200000
}, {
name : '法国',
visits : 590000,
views : 3500000
}, {
name : '德国',
visits : 395000,
views : 6800000
}, {
name : '中国',
visits : 580600,
views : 8500000
} ]
});
//柱状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});
//折叠图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container1',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'linechart',
store : store,
xField : 'name',
yField : 'visits',
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});
//饼状图
new Ext.Panel( {
title : '国际某某统计图',
renderTo : 'container2',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'piechart',
store : store,
categoryField : 'name',
dataField : 'visits',
extraStyle : {
legend : {
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
},
listeners : {
itemclick : function(o) {
var rec = store.getAt(o.index);
Ext.example.msg('选择提示', '你选择了-{0}', rec.get('name'));
}
}
}
});
});
0 0
- extjs常见的三种统计图
- extjs常见的三种统计图
- extjs google统计图
- Extjs常见的几种绘图实现
- ExtJS提交服务器的三种方式
- Extjs 继承控件的三种写法
- 三种常见的过滤器
- 用asp+vml实现的立体统计图(三)----- 曲线图
- 用asp+vml实现的立体统计图(三)----- 曲线图
- 推荐三款强大且漂亮的统计图控件
- 推荐三款强大且漂亮的统计图控件
- 推荐三款强大且漂亮的统计图控件
- arcengine 的几种统计图绘制
- ExtJS 的9种布局详解8(三)
- ExtJS 日期格式转换的三种方式
- extjs组件添加事件监听的三种方式
- ExtJs中form表单提交的三种方式
- ExtJS layout的9种样式详解(三)
- Android图片之Bitmap、BitmapFactory
- 史上最全的CSS hack方式一览
- Centos下安装svn客户端的命令
- 【Leetcode】258. Add Digits
- 解决Url带中文参数乱码问题
- extjs常见的三种统计图
- 循环中的闭包,怎么返回当前索引
- python socket 实例 select 流程
- 什么是重载?重载的作用?
- MYSQL 入门全套
- 全局对象Application的使用,以及如何在任何地方得到Application全局对象
- Swift3.0 Alamofire 网络请求的封装--->get,post,upload图片上传
- 数据分析的一般过程
- 苹果开发者账号过期了的续费流程