您的位置：首页 > 其它

初识 EXT3.0 中的 chart

2009-08-31 20:37 405 查看

今天我们大哥让我学习一下 EXT3.0。说里边有个新组件 chart 让我好好看一下。

在官网上下了个 EXT3.0（http://extjs.com/products/extjs/download.php）。直接解压到 Tomcat 的 Webapps 里边。这样可以在服务器下看 EXT 的 API 和 examples。先看看 examples，里边确实多了一项 chart。打开后发现，chart 分为线形图，饼图等等。今天只把线形图看了。构造线形图必须提供一个 store。store 可以使用本地数据，也可以从后台获取数据。下面是一个从后台获取数据的例子：

test.html

===================================================================================

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Charts</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function() {
var store = new Ext.data.JsonStore({
fields:["name", "visits", "views"],
url:"test.jsp"
});
store.load();

// extra extra simple
new Ext.Panel({
title: "ExtJS.com Visits Trend, 2007/2008 (No styling)",
renderTo: "chart",
width:800,
height:800,
url:"resources/charts.swf",
layout:"fit",
frame:true,

items: {
xtype: "linechart",
store: store,
xField: "name",
yField: "visits",
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.Msg.alert("Item Selected", "You chose dddddddddddddddddd");
}
}
}
});
});

</script>

</head>

<body id="chart"></div>

====================================================================================

test.jsp

====================================================================================

<%@ page contentType="text/html;charset=utf-8"%>
<%
String sb="";
sb+="{";
sb+="root:[{";
sb+="name:'Jul07',visits:245000";
sb+="},{";
sb+="name:'Aug07',visits:205000";
sb+="},{";
sb+="name:'Sep07',visits:115000";
sb+="},{";
sb+="name:'Oct07',visits:255000";
sb+="},{";
sb+="name:'Nov07',visits:345000";
sb+="},{";
sb+="name:'Dec07',visits:315000";
sb+="}]";
sb+="}";

out.print(sb);
%>

===================================================================================

JsonStore 必须和 JSON 对象对应好， JSON 里有 root ，则 JsonStore 里必须指定 root。

横竖坐标的生成和数据类型有关，如果是数值类型的，则自动计算出上限和下限，并根据线形图的大小来选取合适的间隔。图越大，间隔越小。如果是字符类型的，则每项都显示，不过这也是在图的大小足够的情况下才能完全显示。

第一天就看了这么多，上面说的全是自己的看法，不一定正确，算是一个参考吧。

希望大家多多指点。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航