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 ...
随机推荐
- c c++ 混合编译
单个源文件生成可执行程序 下面是一个保存在文件 helloworld.cpp 中一个简单的 C++ 程序的代码: 1 2 3 4 5 6 7 8 9 /* helloworld.cpp */ # ...
- MyEclipse添加模板注释
只有两个步骤: 1.设置模板 Windows—Preference—Java—Code Style—Code Templates 图中, Configure generated code and co ...
- A*算法（附c源码）
关于A*算法网上介绍的有很多,我只是看了之后对这个算法用c写了一下,并测试无误后上传以分享一下,欢迎指正!下面是我找的一个介绍,并主要根据这个实现的. 寻路算法不止 A* 这一种, 还有递归, 非递归 ...
- MQTT 及其 测试工具
协议说明书:https://mcxiaoke.gitbooks.io/mqtt-cn/content/mqtt/04-OperationalBehavior.html 官网提供了很多的broker模拟 ...
- 20190312 Windows安装Kafka
1. 下载 使用版本2.1.1 官网下载地址 2. 安装 2.1. 前提 已安装ZooKeeper,可参考 20190311 Windows安装ZooKeeper 进行安装ZooKeeper 2.2. ...
- Jenkins发送邮件
Jenkins发送邮件 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.配置并发执行任务数量 1>.点击系统管理 2>.点击系统设置 3>.修改执行者数量为: ...
- 网络地址转换-NAT
网络地址转换-NAT 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.NAT组网和常用术语 私网:局域网内IP 公网:因特网的公网ip地址 NAT设备:就是讲私网地址转换为公网的 ...
- Nginx 入门指南
Nginx 入门指南 简介: Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,其特点是占有内存少,并发能力强.本教程根据淘宝核心系统服务器平台组的 ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- Java编程思想 学习笔记9
九.接口 接口和内部类为我们提供了一种将接口与实现分离的更加结构化的方法. 1.抽象类和抽象方法 抽象类是普通的类与接口之间的一种中庸之道.创建抽象类是希望通过这个通用接口操纵一系列类. Java提 ...