Ext 3.0 동적 데이터 차 트 초기 분석
19079 단어 JavaScriptjsoncssservletext
참고 한 좋 은 글 은 다음 과 같다.
첫 번 째 문장: http://atian25.iteye.com/blog/413947
이 유용 한 것: Chart 의 일부 스타일 과 구체 적 인 설정 에 대한 용법 파라미터: http://developer.yahoo.com/yui/charts/
Yahoo: http://developer.yahoo.com/flash/astra-flash/
http://www.hmgis.cn/post/366.html
ExtJS Chart 의 버그 발견: http://blog.csdn.net/acsu/archive/2009/11/26/4881834.aspx
ExtJS. chart. PieChart 의 블록 별 색상 을 어떻게 정의 합 니까?
http://www.cnblogs.com/beginor/archive/2009/11/22/1608034.html
데모 전체 사고방식:
Servlert 는 List 를 자바 빈 대상 으로 봉 인 했 습 니 다. 자바 빈 대상 의 속성 데 이 터 는 무 작위 로 생 성 된 다음 Json - lib 를 통 해 List 를 json 형식 문자열 로 변환 하고 인쇄 합 니 다.
그리고 페이지 Js 는 Ext. data. JSonReader, Ext. data. store 를 통 해 되 돌아 오 는 json 형식 데 이 터 를 읽 습 니 다.
프로젝트 디 렉 터 리 그림:
Src 디 렉 터 리: DataBean. java, 간단 한 JavaBean 클래스 입 니 다.
DataServert. java 에서 데 이 터 를 만 드 는 Servlet 클래스 (JSon 형식 데 이 터 를 되 돌려 줍 니 다).
WebRoot 디 렉 터 리: chart 에서 charts. js 중요 한 js 코드.
extjs 디 렉 터 리, ext 에서 통용 되 는 js, css, swf 등 자원 파일.
효과 그림:
키 코드:
javaBean:
package com.bean;
import java.io.Serializable;
public class DataBean implements Serializable {
private static final long serialVersionUID = 1L;
private String name = "";
private int visits = 0;
private int views = 0;
public DataBean (String name, int visits, int views) {
this.name = name;
this.views = views;
this.visits = visits;
}
public DataBean(){}
public String getName () {
return name;
}
public void setName ( String name ) {
this.name = name;
}
public int getVisits () {
return visits;
}
public void setVisits ( int visits ) {
this.visits = visits;
}
public int getViews () {
return views;
}
public void setViews ( int views ) {
this.views = views;
}
}
DataServert:
package com.bean;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class DataServert extends HttpServlet {
/**
* Constructor of the object.
*/
public DataServert () {
super ();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy () {
super.destroy (); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet ( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
response.setContentType ( "text/html;charset=utf-8" );
request.setCharacterEncoding ( "utf-8" );
PrintWriter out = response.getWriter ();
String jsonString = "";
List<DataBean> list = new ArrayList<DataBean> ();
String[] names = { "1G", "2G", "3G", "4G", "5G", "6G", "7G", "8G" };
Random random = new Random ();
for (int i = 0; i < names.length; i++) {
int num = random.nextInt ( 100 ) * 100;
DataBean data = new DataBean ( names[i], num, num / 2 );
list.add ( data );
}
JSONArray arryData = null;
arryData = JSONArray.fromObject ( list );
jsonString = "{totalCount:" + list.size () + ",data:" + arryData.toString ().replaceAll ( "
", "" ) + "}";
System.out.println (jsonString);
out.print ( jsonString );
out.flush ();
out.close ();
}
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost ( HttpServletRequest request, HttpServletResponse response ) throws ServletException,
IOException {
doGet ( request, response );
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init () throws ServletException {
// Put your code here
}
}
charts.js
Ext.chart.Chart.CHART_URL = '../extjs/resources/charts.swf'; // flash
var json_store;
Ext.onReady(function() {
var json_reader = new Ext.data.JsonReader({
idProperty : "name",
root : 'data',
totalProperty : "totalCount",
fields : [{
name : 'name',
type : "string"
}, {
name : 'views',
type : "int"
}, {
name : 'visits',
type : "int"
}]
});
json_store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '../DataServert.do',
method : 'POST'
}),
reader : json_reader
});
// extra extra simple
new Ext.Panel({
title : 'ExtJS.com Visits Trend, 2007/2008 ',
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'linechart', //
store : json_store,
xField : 'name', // X
yField : 'visits', // Y
listeners : {
itemclick : function(o) {// .
var rec = store.getAt(o.index);
Ext.example.msg(' :', ' {0}.', rec
.get('name'));
}
},
series : [{
type : 'line', // line
displayName : ' ',
yField : 'visits',
style : {
color : '#6666CC'
}
}]
}
});
// extra simple
new Ext.Panel({
iconCls : 'chart',
title : 'ExtJS.com Visits Trend, 2007/2008 ( )',
frame : true,
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',
store : json_store,
url : '../extjs/resources/charts.swf',
xField : 'name',
yField : 'visits',
yAxis : new Ext.chart.NumericAxis({
displayName : 'Visits',
labelRenderer : Ext.util.Format
.numberRenderer('0,0')
}),
tipRenderer : function(chart, record) {
return Ext.util.Format.number(
record.data.visits, '0,0')
+ ' visits in ' + record.data.name;
},
chartStyle : {
animationEnabled : true,//
legend : {//
display : "bottom",
spacing : 2,
padding : 5,
font : {
name : 'Tahoma',
color : '#3366FF',
size : 12,
bold : true
}
}
},
series : [{
type : 'column', // line
displayName : ' ',
yField : 'visits',
style : {
color : '#3366FF'
}
}]
}
});
// more complex with a custom look
new Ext.Panel({
iconCls : 'chart',//
title : 'ExtJS.com Visits and Pageviews, 2007/2008 ( )',
frame : true,
renderTo : 'container',
width : 500,
height : 300,
layout : 'fit',
items : {
xtype : 'columnchart',//
store : json_store,
url : '../extjs/resources/charts.swf',
xField : 'name',// X
yAxis : new Ext.chart.NumericAxis({
displayName : 'Visits',
labelRenderer : Ext.util.Format
.numberRenderer('0,0')
}), // Y
tipRenderer : function(chart, record, index, series) {// tip
if (series.yField == 'visits') {
return Ext.util.Format.number(
record.data.visits, '0,0')
+ ' visits in ' + record.data.name;
} else {
return Ext.util.Format.number(
record.data.views, '0,0')
+ ' page views in '
+ record.data.name;
}
},
chartStyle : {
padding : 10,
animationEnabled : true,//
font : {//
name : 'Tahoma',
color : 'silver',
size : 11
},
border : {
// color:'#3399FF',
// size:1
},
background : {
color : '#CCCCCC',//
alpha : 0.1
//
// image:
// mode:stretch
},
legend : {//
display : "bottom",
spacing : 2,
padding : 5,
font : {
name : 'Tahoma',
color : '#3366FF',
size : 12,
bold : true
}
},
dataTip : { // ,
padding : 5,//
border : {
color : "#FF3333",
size : 1
},
background : {
color : 0xDAE7F6,//
alpha : .8
//
},
font : {
name : 'Tahoma',
color : '#FF3300',
size : 10,
bold : true
}
},
xAxis : { // X
color : 0x69aBc8, // X
majorTicks : {//
color : 0x69aBc8,
length : 4
},
minorTicks : {//
color : 0x69aBc8,
length : 2
},
majorGridLines : {
size : 1,
color : '#999999'
},
// showLabels:false,
labelDistance : 4
},
yAxis : {
color : 0x69aBc8,
majorTicks : {//
color : 0x69aBc8,
length : 4
},
minorTicks : {//
color : 0x69aBc8,
length : 2
},
majorGridLines : {
size : 1,
color : '#999999'
}
}
},
series : [{
type : 'column',//
displayName : ' ',
yField : 'views',
style : {
// image : 'bar.gif',
// mode : 'stretch',
color : '#66CCFF'
}
}, {
type : 'column', // line
displayName : ' ',
yField : 'visits',
style : {
color : '#FF3300'
// lineAlpha:0.5,
// lineColor:'#FF3300',
// alpha:0.8,
// size:10
}
}]
}
});
// a new example
new Ext.Panel({
width : 500,
height : 300,
renderTo : 'container',
title : 'Stacked Bar Chart',
items : {
xtype : 'stackedbarchart',//
store : json_store,
yField : 'name',
xAxis : new Ext.chart.NumericAxis({
stackingEnabled : true,
labelRenderer : Ext.util.Format.usMoney
//
}),
chartStyle : {
legend : {//
display : "top",
spacing : 2,
padding : 5,
font : {
name : 'Tahoma',
color : '#3366FF',
size : 12,
bold : true
}
},
dataTip : { // ,
padding : 5,//
border : {
color : "#FF3333",
size : 1
},
background : {
color : 0xDAE7F6,//
alpha : .8
//
},
font : {
name : 'Tahoma',
color : '#FF3300',
size : 10,
bold : true
}
}
},
series : [{
xField : 'views',
displayName : ' '
}, {
xField : 'visits',
displayName : ' '
}]
}
});
// a Pie Chart example
new Ext.Panel({
width : 400,
height : 400,
title : 'Pie Chart with Legend',
renderTo : 'container',
items : {
store : json_store,
xtype : 'piechart',//
dataField : 'views',//
categoryField : 'name',//
// extra styles get applied to the chart defaults
extraStyle : {
legend : //
{
display : 'bottom',
padding : 5,
font : {
family : 'Tahoma',
size : 13
}
}
}
}
});
loadData();
});
function loadData() {
json_store.reload();
setTimeout('loadData();', 1000);
}
Charts.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath ();
String basePath = request.getScheme () + "://" + request.getServerName () + ":" + request.getServerPort ()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Charts</title>
<link rel="stylesheet" type="text/css"
href="../extjs/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="charts.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css"
href="../extjs/shared/examples.css" />
<style type="text/css">
#container {
padding: 10px;
}
#container .x-panel {
margin: 10px;
}
#container .x-panel-ml {
padding-left: 1px;
}
#container .x-panel-mr {
padding-right: 1px;
}
#container .x-panel-bl {
padding-left: 2px;
}
#container .x-panel-br {
padding-right: 2px;
}
#container .x-panel-body {
}
#container .x-panel-mc {
padding-top: 0;
}
#container .x-panel-bc .x-panel-footer {
padding-bottom: 2px;
}
#container .x-panel-nofooter .x-panel-bc {
height: 2px;
}
#container .x-toolbar {
border: 1px solid #99BBE8;
border-width: 0 0 1px 0;
}
.chart {
background-image: url(chart.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript" src="../extjs/shared/examples.js"></script>
<!-- EXAMPLES -->
<h1>
Charts
</h1>
<div id="container">
</div>
</body>
</html>
아래 에 원본 코드 를 첨부 합 니 다:
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
