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 系列教程(三)——绘制直方图和条形图
在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...
随机推荐
- linux delete files older than 3 days
4 down vote accepted This is easy enough (although note that this goes by a modification time more t ...
- sdut 1728 编辑距离问题( dp )
题目 思路:edit(i, j),它表示第一个字符串的长度为i的子串到第二个字符串的长度为j的子串的编辑距离. 有如下动态规划公式: if i == 0 且 j == 0,edit(i, j) = 0 ...
- svn: E230001: Server SSL certificate verification failed
TortoiseSvn是好的 命令行svn 的时候 有问题 ,也加了--no-auth-cache --non-interactive参数 svn list 地址 选下p 就好. http://sta ...
- Instruments－查看收集到的数据
由于Xcode调试工具Instruments指南篇幅太长,所以本篇blog继续上篇,介绍对Instruments收集到的数据去分析. 关于数据分析 Instruments不解决你代码中的任何问题,它帮 ...
- datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)
http://dt.thxopen.com/reference/option/ajax.dataSrc.html http://datatables.net/reference/option/ajax ...
- 数据库语言（三）：MySQL、PostgreSQL、JDBC
MySQL MySQL资料很多,这里只给出一个在论坛博客中最常用的操作:分页 mysql> select pname from product limit 10,20; limit的第一个参数是 ...
- C# C/S 结构操作Ini系统文件
Winfrom 开发时,有时会将一些系统某个设置保存到Ini 类型的文件中.下面提供操作Ini 文件的代码: public static class IniFiles { [DllImport(&qu ...
- storm入门教程 第四章 消息的可靠处理【转】
4.1 简介 storm可以确保spout发送出来的每个消息都会被完整的处理.本章将会描述storm体系是如何达到这个目标的,并将会详述开发者应该如何使用storm的这些机制来实现数据的可靠处理. 4 ...
- (原创)LAMP教程1-下载虚拟机软件
(原创)LAMP教程1 从今天开始会在我的博客更新LAMP教程,第一章节就是安装虚拟机,因为不可能所有的人都有机会操作服务器,所以今天我打算教大家用虚拟机安装配置当下比较流行的框架,lamp. 好了费 ...
- 如何设置适当的ramp-up period值
如何设置适当的值并不轻易. 首先,假如要使用大量线程的话,ramp-up period 一般不要设置成零. 因为假如设置成零,Jmeter将会在测试的开始就建立全部线程并立即发送访问请求, 这样一来就 ...