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 ...
随机推荐
- Java:读取系统信息
com.sun.management.OperatingSystemMXBean mxbean = (com.sun.management.OperatingSystemMXBean) Managem ...
- IntelliJ IDEA的使用操作链接
一:IntelliJ IDEA导入多个eclipse项目到同一个workspace下: http://www.cnblogs.com/ThinkVenus/p/6783961.html?utm_sou ...
- MQTT 及其 测试工具
协议说明书:https://mcxiaoke.gitbooks.io/mqtt-cn/content/mqtt/04-OperationalBehavior.html 官网提供了很多的broker模拟 ...
- 超详细从零记录Hadoop2.7.3完全分布式集群部署过程
超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程.包含,Ubuntu服务器创建.远程工具连接配置.Ubuntu服务器配置.Hadoop文件配置.Had ...
- frp中的json模块
预备知识 Go中的接口的数据结构可以分为两部分: 其中一部分指向或者存储了原始数据的值 另一部分指向或者存储了原始数据的类型描述符(其中包含类型,以及对应于接口中的方法) 所以大体上我们可以粗略的认为 ...
- 同步、异步、阻塞、非阻塞与future
前言 随着移动互联网的蓬勃发展,手机App层出不穷,其业务也随之变得错综复杂.针对于开发人员来说,可能之前的一个业务只需要调取一次第三方接口以获取数据,而如今随着需求的增加,该业务需调取多个不同的第三 ...
- POJ - 2031 Building a Space Station（计算几何+最小生成树）
http://poj.org/problem?id=2031 题意 给出三维坐标系下的n个球体,求把它们联通的最小代价. 分析 最小生成树加上一点计算几何.建图,若两球体原本有接触,则边权为0:否则边 ...
- WorkerMan 入门学习之（三）基础教程-Timer类的使用
1.ServerTimer.php 代码: <?php /** * 定时器学习 */ require_once __DIR__ . '/Workerman/Autoloader.php'; us ...
- centos redis集群搭建
说明: 10.0.0.111部署6500,6501,6502三个主节点 10.0.0.222部署6500,6501,6502三个备份节点 1.安装redis:略 2.配置内核参数 # 配置 vm.ov ...
- JavaScript中的number跟string
遇到问题困扰很久,因为这看起来木有问题,都是对的啊,殊不知是因为参数需要一个数字类型,但是数据却悄悄变成了字符类型.在群里求救无果最后自己找到了原因. 为什么我箭头里放数字可以正常显示,放temp[i ...