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 ...
随机推荐
- ioi2018集训队自选题:最短路练习题
题意:链接 定义pos[i]表示i这个值在数组里的下标. 我们先用单调栈找到每个元素左边和右边第一个比它大的元素$l_i$和$r_i$,然后建一棵二叉树,我们就叫做maxtree吧 (upd:mdzz ...
- .net跨防火墙链接oracle连接池链接长时间无通讯数据被断开后报错问题解决
环境: .net 4.0以上使用Oracle.ManagedDataAccess组件链接oracle数据库,应用程序与数据库之间存在硬件防火墙. 症状:应用程序启动后正常访问,如果出现长时间无数据库请 ...
- （转）Maven仓库——私服介绍
背景:对Maven私服一直想做个深入的总结,因为不了解,所以感觉很陌生. 转载地址:http://blog.csdn.net/catoop/article/details/62312477 常用功能和 ...
- asp 调用 vb(activex dll) ，参数传递(传引用)需要注意
今天上午测试 vb 与 c(dll) 之间交互,传递参数的时候,没遇到什么太大的问题. 下午在asp中调用vb(activex dll)时, 在asp代码中传参数到 vb(dll)中时,遇到问题了. ...
- Leetcode 496. 下一个更大元素 I
1.题目描述 给定两个没有重复元素的数组 nums1 和 nums2 ,其中nums1 是 nums2 的子集.找到 nums1 中每个元素在 nums2 中的下一个比其大的值. nums1 中数字 ...
- pageisELIgnored作用
在page指令中有一个isELIgnored属性,其值为true则忽略EL表达式,为false则解析表达式
- Linux记录-自动删除几天前的日志文件
#!/bin/sh DDIR=/usr/local/appserver/tomcat_risk/logs/risk_manage find $DDIR -mtime +30 -name "* ...
- WebLogic Server添加删除补丁操作【转】【补】
WebLogic Server添加删除补丁操作 0 查看当前weblogic版本 [weblogic@localhost bin]$ cd /data/bea/weblogic11/wlserver_ ...
- PHP 错误 系列：编码格式错误解决
一.Phalcon模型代码日志错误代码 错误页面显示: Log日志错误代码: PHP message: PHP Fatal error: Namespace declaration statement ...
- <algorithm>里的sort函数对结构体排序
题目描述 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签到.签离记录,请根据记录找出当天开门和关门的人. 输入描述: 每天的记录在第一行给出记录的条目数M (M &g ...