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 系列教程(三)——绘制直方图和条形图
在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...
随机推荐
- Effective C++学习笔记 条款06：如不想使用编译器自动生成的函数，就该明确拒绝
一.为驳回编译器自动提供的机能,可将相应成员函数声明为private并且不予实现.(如果你仅仅是自己不实现的话,编译器会帮你实现) 如: class A { public: A(const strin ...
- 1137. Bus Routes（ｄｆｓ）
1137 做过一样的 怎么又忘了 再一次搜超时 不用回溯 #include <iostream> #include<cstdio> #include<cstring> ...
- 1242. Werewolf（ｄｆｓ）
1242 简单dfs 往孩子方向搜一遍 父母方向搜一遍 输入还搞什么字符串.. #include <iostream> #include<cstdio> #include< ...
- POJ 2828 Buy Tickets （线段树 单点更新 变形）
题目链接 题意:有N个人排队,给出各个人想插队的位置和标识,要求输出最后的序列. 分析:因为之前的序列会因为插队而变化,如果直接算时间复杂度很高,所以可以用 线段树逆序插入,把序列都插到最后一层,le ...
- BZOJ3850: ZCC Loves Codefires
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3850 题解:类似于国王游戏,推一下相邻两个元素交换的条件然后排个序就可以了. 代码: #inc ...
- Java知识点：条件编译
条件编译 一般情况下,源程序中所有的行都参加编译.但有时希望对其中一部分内容只在满足一定条件下才进行编译,即对一部分内容指定编译条件,这就是“条件编译”(conditional compile). ...
- H264中的SPS、PPS提取与作用
牛逼的视频会议网站:http://wmnmtm.blog.163.com/blog/#m=0 ++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- uva 11768
// 扩展欧几里得算法 // 先求出一个解 再求出区间 [x1,x2]有几个整数符合条件// 需要注意的是 水平和垂直2种情况的处理 还有正数和负数取整的细微差别#include <iostre ...
- 转载RabbitMQ入门（4）--路由
路由 (使用Java客户端) 在先前的指南中,我们建立了一个简单的日志系统.我们可以将我们的日志信息广播到多个接收者. 在这部分的指南中,我们将要往其中添加一个功能-让仅仅订阅一个消息的子集成为可能. ...
- Android常用组件
UI相关 图片 Android-Universal-Image-Loader:com.nostra13.universalimageloader:异步加载.缓存.显示图片 ImageLoader:co ...