chart学习
效果图：
目录信息
graphic.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META HTTP-EQUIV="Pragma"CONTENT="no-cache"/>
<META HTTP-EQUIV="Cache-Control"CONTENT="no-cache"/>
<META HTTP-EQUIV="Expires"CONTENT="0">
<meta name='viewport' content='initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0' />
<title>extjs图形学习</title>
<link rel="stylesheet" type="text/css" href="/static/ext-4.1.1a/resources/css/ext-all.css"/>
<script type="text/javascript" src="/static/ext-4.1.1a/ext-all.js"></script>
<!-- 自定义文件，主要是ext代码的编写 -->
<script type="text/javascript" src="line.js"></script>
<script type="text/javascript" src="column.js"></script>
<script type="text/javascript" src="columnLine.js"></script>
<style type="text/css">
div{width:400px;height:300px;float:left;}
</style>
</head>
<body>
<div id="line_panel"></div>
<div id="column2_panel"></div>
<div id="column_and_line_panel"></div>
<div id="column_panel"></div>
</body>
</html>
line.js(生成折线图使用)
Ext.onReady(function(){
// 定义一个数据对象
Ext.define("WeatherPoint",{
extend:'Ext.data.Model',
fields:['temperature','pm10','date']
});
// 创建一个数据源
var vstore = Ext.create('Ext.data.Store',{
model:'WeatherPoint',
data:[
{temperature:58, pm10:100,date:new Date(2011,1,1,8)},
{temperature:63, pm10:165,date:new Date(2011,1,1,9)},
{temperature:73, pm10:285,date:new Date(2011,1,1,10)},
{temperature:78, pm10:235,date:new Date(2011,1,1,11)},
{temperature:81, pm10:335,date:new Date(2011,1,1,12)},
{temperature:120,pm10:425,date:new Date(2011,1,1,13)},
{temperature:90, pm10:450,date:new Date(2011,1,1,14)}
]
});
// 创建图表
Ext.create('Ext.chart.Chart',{
renderTo:'line_panel',
width:400,
height:300,
store:vstore,
axes:[{
title:'temperature',
type:'Numeric',
position:'left',
fields:['temperature','pm10'],
minimum:50,
maximun:500
},{
title: 'Time',
type: 'Time',
position: 'bottom',
fields: ['date'],
groupBy: 'hour',
dateFormat: 'ga'
}],
series:[{
type:'line',
xField:'date',
yField:'temperature'
},{
type:'line',
xField:'date',
yField:'pm10'
}]
});
});
column.js
Ext.onReady(function(){
// 创建一个数据源
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data','money'],
data: [
{ name: 'one', data:120 ,money:85},
{ name: 'two', data: 125 ,money:85},
{ name: 'three', data:180 ,money:85},
{ name: 'four', data: 220 ,money:85},
{ name: 'five', data:162 ,money:85},
{ name: 'six', data:310 ,money:85},
{ name: 'serven', data:300 ,money:85}
]
});
// 需要渲染的颜色
var colors=['#6E548D','#94AE0A','#FF7348','#3D96AE','#94AE0A','#FF7348','#3D96AE'];
// 创建图表
Ext.create('Ext.chart.Chart', {
renderTo: "column_panel",
width: 400,
height: 300,
animate: true,
background:'#aaa',
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'outside',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
renderer:function(sprite, record, attributes, index, store){
attributes.fill=colors[index]; // 定义柱子的颜色
return attributes;
},
// 如果需要根据该柱子对应的数据值，来显示该柱子的颜色，代码如下
/*renderer:function(sprite, record, attributes, index, store){
// (数据源store)的data数据中第index个对象的属性xxx(axisY)
var pm10Temp = store.data.get(index).get(axisY);
if(pm10Temp<50){
attributes.fill=colorArr[0];
}else if(pm10Temp<150){
attributes.fill=colorArr[1];
}else if(pm10Temp<250){
attributes.fill=colorArr[2];
}else if(pm10Temp<350){
attributes.fill=colorArr[3];
}else if(pm10Temp<420){
attributes.fill=colorArr[4];
}else{
attributes.fill=colorArr[5];
}
return attributes;
},*/
// groupGutter:95,
gutter:95,
xField: 'name',
yField: 'data'
}
]
});
Ext.create('Ext.chart.Chart', {
renderTo: "column2_panel",
width: 400,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data','money'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'outside',
'text-anchor': 'middle',
field: ['data','money'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical', // 控制显示的label内容是水平显示还是垂直显示
color: '#333'
},
title:['title1','title2'],
// groupGutter:95,
gutter:95,
xField: 'name',
yField: ['data','money']
}
]
});
});
columnLine.js
Ext.onReady(function(){
// 创建一个数据源
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ name: 'metric one', data:120 },
{ name: 'metric two', data: 125 },
{ name: 'metric three', data:180 },
{ name: 'metric four', data: 220 },
{ name: 'metric five', data:162 },
{ name: 'metric six', data:310 },
{ name: 'metric serven', data:300 }
]
});
// 创建图表
Ext.create('Ext.chart.Chart', {
renderTo: "column_and_line_panel",
width: 400,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'outside',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
// groupGutter:95,
gutter:95,
xField: 'name',
yField: 'data'
},{
type:'line',
xField:'name',
yField:'data'
}
]
});
});
chart学习的更多相关文章
- MS Chart 学习心得
利用Chart控件对学生信息进行统计,最终结果如下: Chart图形控件主要由以下几个部份组成: 1.Annotations --图形注解集合2.ChartAreas --图表区域集合3.Legen ...
- k8s的chart学习（下）
1.开发自己的chart Kubernetes 给我们提供了大量官方 chart,不过要部署微服务应用,还是需要开发自己的 chart,下面就来实践这个主题. 1.1创建 chart 执行 helm ...
- k8s的chart学习（上）
chart 是 Helm 的应用打包格式.chart 由一系列文件组成,这些文件描述了 Kubernetes 部署应用时所需要的资源,比如 Service.Deployment.PersistentV ...
- Flot chart学习笔记
背景及相关简介 在最近的BS新项目中需要用到绘图数据显示的功能.在进行充足的选择之后决定才去开源的Flot.Flot是一个jQuery绘图库.主要用于简单的绘制图表功能.具有吸引人的渲染外观和互操作的 ...
- PHP-Open Flash Chart学习一(swfobject知识)
首先必须了解下swfobject的知识 在网页里面插入swf再平常不过了, 一般会想到如下代码: <object classid="clsid:D27CDB6E-AE6D-11cf-9 ...
- 推荐一个学习Flex chart的好网站
推荐一个学习Flex chart的好网站 2013-03-04 14:16:56| 分类: Flex | 标签: |字号大中小 订阅 推荐一个学习Flex chart的好网站 最近在做一个 ...
- R-plotly|交互式甘特图（Gantt chart）-项目管理/学习计划
本文首发于“生信补给站”微信公众号,https://mp.weixin.qq.com/s/CGz51qOjFSJ4Wx_qOMzjiw 更多关于R语言,ggplot2绘图,生信分析的内容,敬请关注小号 ...
- salesforce 零基础学习（二十六）自定义图表chart简单介绍（使用apex和VF实现）
chart在报表中经常使用到,他可以使报表结果更加直观的展现给用户.salesforce支持VF和apex代码来更好的展示chart. chart分类:常用的图表样式有饼状图,柱状图,折线图,条形图, ...
- Matplotlib学习---用matplotlib画面积图（area chart）
这里利用Nathan Yau所著的<鲜活的数据:数据可视化指南>一书中的数据,学习画图. 数据地址:http://book.flowingdata.com/ch05/data/us-pop ...
随机推荐
- win32 窗口缩放时出现闪屏
今天无意发现之前写的一个小工具在缩放窗口的时候,出现闪屏,主要有两个位置: 工具栏出一闪屏 右侧的控制面板出现闪屏 (这个控制面板与多层元件组合而成) 之前真没注意到这个问题,平时都是最大化/恢复窗口 ...
- oracle 按 123456789 排序 而不是 1 10 11 2 这种
order by decode(trim(translate(cptm,'0123456789',' ')),null,to_number(cptm))
- 利用千人基因组数据库查看SNP在不同地区、国家、洲的频率及个数
首先,进入千人基因组数据库的网站:https://www.ncbi.nlm.nih.gov/variation/tools/1000genomes/ 如下图所示,在数据库的框框里输入我们感兴趣的SNP ...
- (Set) 人见人爱A-B HDU2034
人见人爱A-B 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2034 JAVA代码借鉴链接:https://blog.csdn.net/superbeau ...
- SQL Server 2008以上误操作数据库恢复方法——日志尾部备份
原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...
- 51Nod1376 (dp + BIT // cdq分治)
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1376 求LIS的数量. 乍一看觉得还是dp,仔细一看确实可以用dp做. ...
- scrapy xpath、正则表达式、css选择器
scrapy xpath XPath即为XML路径语言,它是一种用来确定XML(标准通用标记语言的子集)文档中某部分位置的语言.XPath基于XML的树状结构,提供在数据结构树中找寻节点的能力. 学习 ...
- python---redis实现自定义session
SESSION_EXPIRE = 60 SESSION_TYPE = 'Redis' pool = redis.ConnectionPool(host=) redi_conn = redis.Redi ...
- Spark记录-SparkSQL相关学习
$spark-sql --help 查看帮助命令 $设置任务个数,在这里修改为20个 spark-sql>SET spark.sql.shuffle.partitions=20; $选择数据 ...
- 解决zabbix可用性为灰色状态
zabbix添加主机后,获取不到zabbix agent状态,并且图标为灰色,而在zabbix-server端使用zabbix_get可以正常获取到数据.在正常情况下应为绿色或红色. 问题原因,添加主 ...