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 ...
随机推荐
- HTMLUnit web测试
httpClient不能动态执行网页中的js,这样无法获取js生成的动态网页.htmlUnit是个解决方法. if you’re considering web application testing ...
- EFCodeFirst快速搭建入门
EFCodeFirst快速搭建入门 1.新建Model类库项目. 添加EntityFramework.dll的引用. 编写实体类Course,Student. namespace EFCodeFirs ...
- js的append拼接html丢失css样式解决
htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='left ...
- sys模块（二十一）
用于提供对Python解释器相关的操作: sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Pyt ...
- POJ1742Coins(多重背包）
Coins Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 32309 Accepted: 10986 Descripti ...
- java程序中加入@SuppressWarnings("serial")是什么意思？
比如有个类实现了java.io.Serialize接口:package com.onede4.test; public class TestSerial implements java.io.Seri ...
- logstash收集IIS日志
匹配字段 %{TIMESTAMP_ISO8601:log_timestamp} (%{WORD:s-sitename}|-) (%{IPORHOST:s-ip}|-) (%{WORD:cs-metho ...
- php7连接 sqlserver踩过的坑，could not find driver解决方式
最近把环境升级为php7发现在连接sqlser的时候无法使用驱动了 页面错误 后来查看文档发现:php7应该采用Server=xxxx;DataBase=xxxxx 解决方式: DB_DSN_TWO ...
- Hive记录-配置远程连接（JAVA/beeline）
1.修改配置hive-site.xml hadoop core-site.xml限制---参考Hive记录-部署Hive环境 2.启动hadoop #sh /usr/app/hadoop/sbi ...
- java序列化深拷贝【转】
java深拷贝 序列化和反序列化合成在一起的方法CloneUtils import java.io.ByteArrayInputStream; import java.io.ByteArrayOutp ...