简单的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 饼状图报表的更多相关文章

  1. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  2. 一款基于jQuery饼状图比例分布数据报表

    今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览  ...

  3. Java-jfree报表(学习整理)----饼状图、柱状图、折线统计图

    1.使用的报表工具: jfree报表 2.下载网址: http://www.jfree.org/ 下载之后先解压:如下图 下载后:需要的jar包!如下图: 打开:找到以下的两个jar包 再导入开发项目 ...

  4. ECharts 报表事件联动系列四:柱状图,折线图,饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  5. extjs开发———用extJS简单写一个饼状图

    先上效果图: js编写部分简单如下,先插入一个模块,然后给模块中添加内容. var myChart1 = echarts.init(document.getElementById('myChart1' ...

  6. 使用jfreechart生成柱状图、折线图、和饼状图

    JFreeChart是JAVA平台上的一个开放的图表绘制类库.它完全使用JAVA语言编写,是为applications, applets, servlets 以及JSP等使用所设计.下面我就详细介绍如 ...

  7. Echarts动态加载饼状图实例(二)

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div class="ui-contai ...

  8. Echarts动态加载饼状图的实例

    一.引入echarts.js文件(下载页:http://echarts.baidu.com/download.html) 二.HTML代码: <div style="width: 10 ...

  9. 使用 jfreechart 生成 曲线、柱状图、饼状图、分布图 展示到JSP

    虽然现在JS做报表和图形展示已经非常普遍和漂亮了,但是不能忽略有jfreechart 这样一种东西! 这些翻阅资料,在看以前写的示例时发现了关于jfreechart 的简单示例,不管怎样发上来分享一下 ...

随机推荐

  1. NDK编译Python2.7.5

    [背景] 网上有一些ndk编译python的做法,但按照教程做总是不成功,可能是环境版本不一样,导致很多地方的配置都不成功. 网上的教程大多只有做法,没有解释,即使按照教程编译成功,很多细节都不知道为 ...

  2. .Net 插入数据MySql数据库,中文乱码解决问题

    1, 修改mysql根目录下配置文件my.ini,在[client]节点下添加default-character-set=utf8 ,在[mysqld]节点下添加character_set_serve ...

  3. HOG detectMultiScale 参数分析

    前段时间学习了HOG描述子及其与SVM结合在行人检测方面的应用. 当我们用训练好的模型去检测测试图像时,我们会用到detectMultiScale() 这个函数来对图像进行多尺度检测. 这是openc ...

  4. [Codeforces Round #247 (Div. 2)] A. Black Square

    A. Black Square time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  5. R教程计划

    提起数据挖掘,似乎会有很多人望而却步,从生产规划到到规律分析,从生物医学到航天科技,到处都有数据挖掘工程师留下的影子. 通过对比SAS,SPSS,以及R,最终选定了R, 不为什么,免费且高效才是硬道理 ...

  6. redhat 5下源码安装nginx服务

    首先确保机器中已安装 gcc c++,libtool等工具,保证可执行源码安装 A.为了确保能在 Nginx 中使用正则表达式进行更灵活的配置,安装之前需要确定系统是否安装有 PCRE(Perl Co ...

  7. Android之SharedPreferences两个工具类

    相信Android的这个最简单的存储方式大家都很熟悉了,但是有一个小小技巧,也许你没有用过,今天就跟大家分享一下,我们可以把SharedPreferences封装在一个工具类中,当我们需要写数据和读数 ...

  8. Speech Module

    Speech Module 1 FIRST_TEN = ["one", "two", "three", "four", ...

  9. Pro Android 4 第六章 构建用户界面以及使用控件(一)

         目前为止,我们已经介绍了android的基础内容,但是还没开始接触用户界面(UI).本章我们将开始探讨用户界面和控件.我们先讨论一下android中UI设计的一般原理,然后我们在介绍一下an ...

  10. 深入浅出Node.js (5) - 内存控制

    5.1 V8的垃圾回收机制与内存限制 5.1.1 Node与V8 5.1.2 V8的内存限制 5.1.3 V8的对象分配 5.1.4 V8的垃圾回收机制 5.1.5 查看垃圾回收日志 5.2 高效使用 ...