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 系列教程(三)——绘制直方图和条形图
在本章节我们将学习如何绘制条形图和直方图 条形图与直方图的区别:首先,条形图是用条形的长度表示各类别频数的多少,其宽度(表示类别)则是固定的: 直方图是用面积表示各组频数的多少,矩形的高度表示每一组的 ...
随机推荐
- Web内容管理系统 Magnolia 启程-挖掘优良的架构（3）
Author and Public instances 第一个关键观念:instance-实例.每一个项目都必须至少有一个Author实例和至少一个Public实例.下面将告诉你为什么: 基本概念:J ...
- UVa 11021 (概率 递推) Tribles
Tribble是麻球? 因为事件都是互相独立的,所以只考虑一只麻球. 设f(i)表示一只麻球i天后它以及后代全部死亡的概率,根据全概率公式: f(i) = P0 + P1 * f(i-1) + P2 ...
- UVa 580 (递推) Critical Mass
题意: 有两种盒子分别装有铀(U)和铅(L),现在把n个盒子排成一列(两种盒子均足够多),而且要求至少有3个铀放在一起,问有多少种排放方法. 分析: n个盒子排成一列,共有2n中方案,设其中符合要求的 ...
- Java [Leetcode 268]Missing Number
题目描述: Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one that is ...
- poj 3352 Road Construction
// 只能说这题和上题一模一样// 我就直接贴上题代码了.. #include <iostream> #include <algorithm> #include <que ...
- CXF之五 拦截器Interceptor
拦截器(Interceptor)是CXF功能最主要的扩展点,可以在不对核心模块进行修改的情况下,动态添加很多功能.拦截器和JAX-WS Handler.Filter的功能类似,当服务被调用时,就会创建 ...
- C#中常用的字符串加密，解密方法封装，包含只加密，不解密的方法
//方法一//须添加对System.Web的引用//using System.Web.Security;/// <summary>/// SHA1加密字符串/// </summary ...
- Python 笔记 : 类和继承
# -*- coding= utf-8 -*- # 文件编码定义的语法规则是: coding[:=]/s*([-/w.]+) # 未指定编码将默认为 : ASCII # 同时要注意物理文件的编码也要 ...
- 【和我一起学Python吧】Python3.0与2.X版本的区别
做为一个前端开发的码农,却正在阅读最新版的<A byte of Python>.发现Python3.0在某些地方还是有些改变的.准备慢慢的体会,与老版本的<A byte of Pyt ...
- JavaScript数值转换总结
在JavaScript中,数值转换一般有三种方式: 一.Number(param)函数:param可以用于任何数据类型 1.1 param是Boolean值,true和false分别转换为1和0: ...