extjs常见的三种统计图

最新推荐文章于 2017-12-28 16:40:28 发布
最新推荐文章于 2017-12-28 16:40:28 发布
阅读量5k 收藏 5
点赞数 1
分类专栏： js学习 文章标签： 柱状图 折叠图 饼状图 extjs

chart.html源码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>extjs统计图</title>


<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="extjs统计图">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-base.js">
</script>
<script type="text/javascript" src="../extjs/ext-all.js">
</script>
<script type="text/javascript">
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'));
}
}
}


});
});
</script>
<style type="text/css">
.style {
margin-top: 30px;
margin-left: 200px;
}
</style>
</head>


<body>
<div class="style">
<h3>
柱状图
</h3>
<br />
<div id="container"></div>
<br />
<h3>
折叠图
</h3>
<br />
<div id="container1"></div>
<br />
<h3>
饼状图
</h3>
<br />
<div id="container2"></div>
</div>
</body>

</html>


效果图如图所示：




浅^醉
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
EXtjs 统计图 饼图 直方图 和折线图
05-18
Extjs 统计图 饼图 直方图 和折线图
ExtJS（5）- Ext5的统计图Chart
weixin_34246551的博客
12-18 230
今天系统整理下Ext5中的chart使用以及遇到的一些问题。首先是Ext5中chart的引用，在5之前的版本中chart的api会被集合在ext-all.js中，但是在5当中并不是这样，如果只引入ext-all.js，我们引用chart API时将无法找到，我们还需要引入以下js<scripttype="text/javascript"src="ex...
使用Ext创建多柱、折线统计图（动态加载数据）
总有一天，你的日积月累，会成为别人的望尘莫及
07-31 510
最近一个项目里面要用统计图，我对统计图就FreeChart知道一点，对于Ext，是一点都不会。只能边学表做，边做边学吧。 先看效果图：  这个一个根据客户类型查询出来的关于合同金额的统计图，比较简单。类型只有两种，柱也只有三个（这个不重要） 需要用到的主要的Java代码：   Action代码（SQL语句随便写）： SView view= (SView) dao.get(SView...
在EXT中使用统计图
pencil456的专栏
01-28 4318
<br />先看一下效果图。<br /> <br />一 前言：     在项目实施中，设计统计部分经常会使用图表进行显示，在Extjs3中内置了图表控件，但实际表现无法达到3D的美观效果，通过查找FusionChart可以实现比较美观的3D或2D图表显示。  注：FusionChart是个商业图表，不过有免费版本使用. 官方网站：http://www.fusioncharts.com/<br /><br />二 实现方法  1：在Extjs中使用FusionChart需要使用到第三方插件uxChartPa
Extjs4 动态生成图表chart（从后台传数据动态显示）
小新新的专栏
05-20 6423
做项目，需要搞一个图表，从后台的数据库中统计出数据再传到前台来。搞了几个钟头，都不能实现功能。数据是传到了前台，可是图表总是显示不了，如果用静态数据的话，图表显示成功。上网查了很多资料，这方面的资料也不错，看来大家出现这个问题不多，那么就应该很好解决的。看了有同样问题的网页，有的说是是数据还没有加载到Store里面，图表就生成了，没有数据，所以没有显示，因此我又搞了个数据加载成功的回调函数，还是只
ExtJS6图表简单demo(折线图，散点图，柱状图)
taizhimin
06-27 7076
ExtJS6图表简单demo(折线图，散点图，柱状图)首先需要引入这三个文件，都懂 <link rel="stylesheet" type="text/css" href="build/classic/theme-triton/resources/theme-triton-all.css" /> <script type="text/javascript" src="bui
extjs图表-条形图
程序媛-jjl的博客
12-28 1236
本篇文章将介绍extjs图表中条形图。 将实现以下的功能： 1.从后端请求数据并运用到图表中，形成动态数据。 2.查询出每年各个月中人数。 3.改变条形柱的颜色，改变默认的颜色换成自己想要的颜色。 renderer: function(sprite, storeItem, barAttr, i, store) {
extjs google统计图
zxliujunjun的专栏
12-15 551
Google Chart API 之 bar_charts   http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html         google图地址   https://www.google.com/uds/?file=visualization&v=1&packages=corech
【ExtJs】柱状图，改变每条柱子的颜色
编程记录，亲测有效
05-03 3599
ExtJs的柱状图的画法其实与《【ExtJs】折线图》（点击打开链接）的画法几乎完全一样，难点在于各个柱子的颜色。ExtJs对于柱状图的颜色，并没有单独为其开放独立的参数。因此还是与《【ExtJs】表格控件Grid的增删改查，利用renderer让操作列actioncolumn使用文字而不是图标》（点击打开链接）一样，要自己单独设置东西，必须使用到渲染器。如果不设置，它画出来的柱状图，每次都是同样
EXT JS 统计图表
07-19
内含 Ext JS Charts的Demo
FusionCharts+ext统计图
05-05
FusionCharts+ext实现的3D效果的柱状图，饼状图
extjs图形绘制之饼图实现方法分析
01-19
本文实例讲述了extjs图形绘制之饼图实现方法。分享给大家供大家参考，具体如下： 这篇文章将介绍extjs中自带的饼图。 代码如下： Ext.define('ChartPieTest', { extend: 'Ext.panel.Panel', autoScroll : true, initComponent: function () { var me = this; me.store = me.createStore(); me.grid = me.getGridPanel(); me.mainPanel = Ext.create('Ext.p
Extjs4--grid表格的分组和统计
islittletan的专栏
04-22 3738
Extjs--grid表格的分组和统计
Extjs的grid总计实现
wang_tao219的博客
02-01 2556
Ext.define('person.view.tongji.Salary', {     extend: 'Ext.panel.Panel',     layout: 'border',     border: false,     margins: '0 0 0 0',     initComponent: function() {         var me = this;
ExtJs 备忘录（7）—— GirdPanl表格（三） [ 统计|查看、修改单行记录 ]
weixin_33742618的博客
01-17 119
前言 　　关键字：Ext GirdPanel, Ext.Window 居中,Ext 统计,Ext.ux.grid.GroupSummary   　　有些好习惯不能因为这样那样的事情而中止或拖延，比如加班、找工作...... N天之后——继续内疚和纠结，本意是鼓励自己来着，既然没法长期有效那短期有效也行吧，总比什么效果没有要好 :)     系列 　　1.　　ExtJs 备忘录（1）—...
EXTJS4:在grid中加入合计行
weixin_30892037的博客
05-07 267
还记得在4.0.7之前的版本中，要在gridpanel中加一个合计栏是多么麻烦啊，4.0出现后，一句话就搞定 直接copy官方的 Ext.onReady(function () { Ext.define('TestResult', { extend: 'Ext.data.Model', fields: [...
ExtJS图表
张晨光老师的播客
03-24 1781
1.1 学习技能点 本次在线学习将学习以下知识技能：Ø 柱状图Ø 饼状图Ø 折线图1.2 学习任务ExtJS3使用的Flash Chart来源于YUI，其中包括柱状图、饼状图等多种图表，这些图表可以与ExtJS组件完美整合，不仅可以在Panel中显示图表，还可以通过Store为图表提供数据。1.2.1 任务1：使用柱状图统计每月的访问人数需求说明首先定义一个JsonStroe为我们要实现的图表提供
extjs6条形统计对比图
最新发布
03-29
ExtJS 6提供了多种类型的统计对比图，其中条形统计对比图是一种常见的类型，可以通过以下代码实现： ``` Ext.create('Ext.chart.CartesianChart', { renderTo: Ext.getBody(), width: 800, height: 400, store:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值