ext4.0绘制chart（柱状图，条形图）
- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link rel="stylesheet" type="text/css" href="<%=basePath%>ext-4.0/resources/css/ext-all.css" />
- <script type="text/javascript" src="<%=basePath%>ext-4.0/bootstrap.js"></script>
- <script type="text/javascript" src="<%=basePath%>ext-4.0/locale/ext-lang-zh_CN.js"></script>
- <link href="<%=basePath%>js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
- <link href="<%=basePath %>css/core.css" rel="stylesheet" type="text/css" media="screen"/>
- <link href="<%=basePath %>css/style.css" rel="stylesheet" type="text/css" media="screen"/>
- <script src="<%=basePath%>js/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- Ext.onReady(function(){
- Ext.create('Ext.panel.Panel', {
- title : '3天内特大重大故障饼状图',
- width : 500,
- height : 500,
- renderTo: 'div1',
- layout : 'card',
- items : [{
- xtype : 'chart',
- store : {
- fields: ['platName','ratio','level','troubleLevel'],
- proxy: {
- type: 'ajax',
- url : '<%=basePath %>reports/3dayAgo.action',
- reader: {
- type: 'json',//Ext.data.reader.Json解析器
- root: 'reportLs'
- }
- },
- autoLoad: true
- },
- animate : true,//是否启用动画效果
- legend : {
- position : 'bottom' //图例位置
- },
- shadow : true,
- series : [{
- type : 'pie',//图表序列类型
- field : 'ratio',//对应饼状图角度的字段名
- showInLegend : true,//是否显示在图例当中
- // colorSet : ['#FFFF00','#669900','#FF6699','#66CCCC'],//颜色配置
- donut : 20,//麦圈图中空部分半径
- label : {
- field : 'platName',//标签字段名
- contrast : true,
- color : '#FFFF00',
- renderer : function(v){//自定义标签渲染函数
- return "["+v+"]";
- },
- display : 'middle',//标签显现方式
- font : '18px "Lucida Grande"'//字体
- },
- highlight : {
- segment : {
- margin: 10 //空白区域宽度
- }
- },
- tips : {
- trackMouse : true, //是否启用鼠标跟踪
- width : 50,
- height : 28,
- renderer : function(storeItem) {//自定义渲染函数
- var title = storeItem.get('ratio') + '%';
- this.setTitle(title);
- }
- }
- }]
- }]
- });
- var dataStore = new Ext.data.JsonStore({
- fields:['ageRange', 'proportion', 'growing'],
- data: [
- {ageRange :'小于30岁', proportion : 10, growing : 35},
- {ageRange :'30-40岁', proportion : 40, growing : 30},
- {ageRange :'40-50岁', proportion : 30,growing : 30},
- {ageRange :'50岁以上', proportion : 20, growing : 30}
- ]
- });
- Ext.create('Ext.panel.Panel', {
- title : '3天内特大重大故障条形图',
- width: 500,
- height: 500,
- renderTo: 'div2',
- layout: 'card',
- items : [{
- xtype : 'chart',
- store : {
- fields: ['troubleName','size'],
- proxy: {
- type: 'ajax',
- url : '<%=basePath %>reports/3dayAgo2.action',
- reader: {
- type: 'json',//Ext.data.reader.Json解析器
- root: 'repBeans'
- }
- },
- autoLoad: true
- },
- axes: [{
- type: 'Numeric',
- position: 'left',
- minimum : 0,//数轴最小值
- maximum : 5,//数轴最大值
- //fields: ['size','size'],//同时展示2个数据
- title: '故障次数'
- }, {
- type: 'Category',
- position: 'bottom',
- fields: ['troubleName'],
- title: '平台级别'
- }],
- legend : {
- position : 'bottom' //图例位置
- },
- series : [{
- type: 'column',
- axis: 'left',
- xField: ['troubleName'],//x轴字段
- yField: ['size'],//y轴字段
- title : ['3天内故障发生次数'],//配置图例字段说明
- label : {
- field : ['size'],//标签字段名
- display : 'outside',//标签显现方式
- font : '12px "Lucida Grande"',//字体
- renderer : function(v){//自定义标签渲染函数
- return v + '次';
- }
- }
- }]
- }]
- });
- });
- </script>
- </head>
- <body>
- <div style="float: left;padding-left: 10px" id="div1"></div>
- <div style="float: right;padding-right: 10px" id="div2"></div>
- </body>
- </html>
- <script type="text/javascript">
- $(function(){
- // alert($(document).height());
- h = $(document).height() - 64;
- $("#form").css("height",h);
- });
- </script>
ext4.0绘制chart（柱状图，条形图）的更多相关文章
- ASP.NET Core +Highchart+ajax绘制动态柱状图
一.项目介绍利用前端Highchart,以及ajax向后台获取数据,绘制动态柱状图.hightchart其他实例可查看官网文档.[Highchart](https://www.highcharts.c ...
- iOS绘制收益柱状图
项目需求,参考了其他绘图demo,自己绘制出来了,不过代码改得有点乱,添加了很多变量,时间关系没用太合适的命名,逻辑处理也没进行优化. 看看效果图(虚线区域都是画的,其他区域添加的都是控件),附上源码 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- EXTJS4.2 chart 柱状图
chart 柱状图 Ext.require('Ext.chart.*'); Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout ...
- echarts —— 绘制横向柱状图（圆角、无坐标轴）
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- 小白学Python（13）——pyecharts 绘制 柱状图/条形图 Bar
Bar-基本示例 from example.commons import Faker from pyecharts import options as opts from pyecharts.char ...
- 【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
- python Matplotlib 系列教程(三)——绘制直方图和条形图
在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...
随机推荐
- Android下fragment切换的动画效果
网上看到的例子,转过来记录一下,学习一下,感谢原作者的辛勤编码,效果非常好 基于Android3.0新增的动画api,效果很赞 共21种动画效果: <item>X轴缩放</item& ...
- IP网络5种基本寻址方式 (单播、多播、广播、任播、地域多播)
Addressing methods The Internet Protocol and other network addressing systems recognize five main ad ...
- [Everyday Mathematics]20150114
设 $a_0$, $d$ 给定, $a_k=a_0+kd$, $k=0,1,\cdots,n$. 试求如下 $n+1$ 阶行列式的值: $$\bex \sev{\ba{ccccc} a_0&a ...
- 类装载器ClassLoader
类装载器工作机制 类装载器就是寻找类的节码文件并构造出类在JVM内部表示对象的组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: [1.]装载:查找和导入Class文件: [2.]链接 ...
- FTP文件上传与下载
实现FTP文件上传与下载可以通过以下两种种方式实现(不知道还有没有其他方式),分别为:1.通过JDK自带的API实现:2.通过Apache提供的API是实现. 第一种方式:使用jdk中的ftpClie ...
- 通过ListActivity使用ListView布局方法
先简单的介绍一下ListActivity ListActivity是一个专门显示ListView的Activity类,它内置了ListView对象,只要我们设置了数据源,就会自动地显示出来.ListA ...
- IOS Swizzle（hook）
/////////////////////////////////////////////////////////////////////////////////////////////////// ...
- 大话细说ORM
什么是ORM? ORM,即对象关系映射(Object Relational Mapping)表示一种技术,用来把(对象模型)表示的对象映射到基于SQL的(关系模型)数据结构中去. 说得通俗点,就是在对 ...
- bzoj 2555 SubString（SAM+LCT）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2555 [题意] 给定一个字符串,可以随时插入字符串,提供查询s在其中作为连续子串的出现 ...
- 我的web前端修炼之路从此开始
看过一篇文章,上面说过要想学习一门新技术,从什么时候开始都是不晚的.但对于一名大四的学生,只会一点简单的网页架构,只懂得HTML,CSS,JavaScript简单的一点皮毛,却怎么也说不过去.但也是这 ...