ExtJS 饼状图报表
简单的ExtJS饼状图报表。
先上源码,咱再慢慢解析:
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': '北京', 'data': 10 },
{ 'name': '天津', 'data': 5},
{ 'name': '上海', 'data': 8 },
{ 'name': '深圳', 'data': 7 },
{ 'name': '广州', 'data': 6 },
{ 'name': '济南', 'data': 5 },
{ 'name': '郑州', 'data': 4 },
{ 'name': '石家庄', 'data': 3 }
]
});
Ext.create("Ext.panel.Panel",{
width:600,
height:500,
title:"饼状图",
layout:"fit",
renderTo:Ext.getBody(),
items:[{
xtype:"chart",
store:store,
animate:true,
legend: {
position: 'right'
},
series:[{
type:"pie",
field:"data",
donut:true,
showInLegend: true,
label:{
display:"name",
contrast:true,
},
tips:{
trackMouse:true,
renderer:function(storeItem,item){
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get("data"));
}
},
highlight:{
segment:{
margin:20
}
},
listeners:{
itemclick:function(o){
var rec=store.getAt(o.index);
alert(rec.get("data"));
}
} }]
}]
});
})
上述代码便是一个简单的饼状图,数据这里我采用的是本地数据。
示例效果如下图所示:
现在我们来解析一下上面的代码:
里面的store存储数据,这里我就不详细解释了。我这里采用的是本地的数据。
如效果图所示,我采用了一个panel来包含该饼状图。
xtype:"chart" :创建一个图表
series:是为所有图标系列包含公共逻辑抽象类。属性type:"pie",用来表示采用的是饼状报表。
field:"data":当前饼状图块中的数据值。
display:"name":如上图所示,是用来显示饼状图中的文字的。
tips:这里是用来显示鼠标放在饼状图上的时候,给你的一个提示。用来显示当前图块的信息。
trackMouse:true:此属性设置为true表示提示框跟随你的鼠标而动。
segment:该属性是用来控制,当鼠标放在当前图块中的时候分开的距离。这里margin一般为20 当数值比20 大或者小的时候则会出现一些空白。具体效果可以自己稍微尝试一下。
lengend和showInLegend:这两个必须同时设置,操作右侧的小图例。
itemclick:点击事件。这个事件需要设置在series中,否则无法触发。
以上是我对这个饼状图的一些个人理解。如有什么不足还请各位大神指教。
ExtJS 饼状图报表的更多相关文章
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- 一款基于jQuery饼状图比例分布数据报表
今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- Java-jfree报表(学习整理)----饼状图、柱状图、折线统计图
1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...
- ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- extjs开发———用extJS简单写一个饼状图
先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...
- 使用jfreechart生成柱状图、折线图、和饼状图
JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...
- Echarts动态加载饼状图实例(二)
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...
- Echarts动态加载饼状图的实例
一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...
- 使用 jfreechart 生成 曲线、柱状图、饼状图、分布图 展示到JSP
虽然现在JS做报表和图形展示已经非常普遍和漂亮了,但是不能忽略有jfreechart 这样一种东西! 这些翻阅资料,在看以前写的示例时发现了关于jfreechart 的简单示例,不管怎样发上来分享一下 ...
随机推荐
- Java中的int和Integer
代码: public class Test{ public static void main(String[] args){ Integer i01 = 59; int i02 = 59; Integ ...
- js 按元素向数组中最佳删除元素
追加::: var a = [];// 创建数组 a.push(1); // 添加到最后 a.unshift(); // 添加到第一个位置 删除:::如果你没有使用第三方框架,有类似的扩展功能可以根据 ...
- Gora官方范例
参考官方文档:http://gora.apache.org/current/tutorial.html 项目代码见:https://code.csdn.net/jediael_lu/mygoradem ...
- Java之集合类
出处:http://blog.csdn.net/zhangerqing 一.集合类简介 数组是很常用的一种的数据结构,我们用它可以满足很多的功能,但是,有时我们会遇到如下这样的问题: 1.我们需要该容 ...
- Idea使用记录--每次修改JS文件都需要重启Idea才能生效解决方法
最近开始使用Idea,有些地方的确比eclipse方便.但是我发现工程每次修改JS或者是JSP页面后,并没有生效,每次修改都需要重启一次Tomcat这样的确不方便.我想Idea肯定有设置的方法,不可能 ...
- ubuntu 执行apt-get update 提示无法获得锁
问题如下: y@y:~$ sudo apt-get updateE: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用)E: 无法对目录 /var/l ...
- qt info.plist 添加
http://www.waitingfy.com/archives/1242 http://www.sollyu.com/settings-icon-under-the-qt-mac-applicat ...
- hadoop 1.2.1 安装步骤 伪分布式
最近在系统的学习hadoop 课程第一步是安装hadoop1.x,具体安装步骤如下: 一.系统安装 本文使用centos6.5安装,具体安装步骤省略 二.jdk安装 下载jdk1.7.0_51解压,在 ...
- JAVASCRIPT实现XML分页
为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了.而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持.这样不但服务器 ...
- linux下tcpdump命令详解
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...