ExtJS学习2——使用Chart
ExtJS3.0出来了，不出所料，添加了Chart图表功能，但我觉得它自带的四种类型图表实在不怎么样，不够美观。今天在网上找了一下合适的Chart，比较流行的有AMChart和ChartFusion等。于是使用ExtJS和AMChart做了一个简单的图表演示Demo，感觉还不错。
我下载的AMChart类型是amcolumn，即柱状图，大家可以根据需要在http://www.amcharts.com下载合适的图表类型。数据则是使用ASP.NET，不过由于AMChart不支持JSON，所以示例数据就是一个aspx页面response.write一堆XML数据。
其代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<div id="flashcontent">
</div>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="amcolumn/swfobject.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel = new Ext.Window({
title: 'My Panel',
applyTo: 'flashcontent',
width:520,
height:380,
html: '<div id="chart"/>'
});
var so = new SWFObject("amcolumn/amcolumn.swf", "amcolumn", "520", "380", "8", "#FFFFFF");
so.addVariable("path", "amcolumn/");
so.addVariable("settings_file", encodeURIComponent("amcolumn_settings.xml"));
so.addVariable("data_file", escape("data.aspx"));
so.addVariable("preloader_color", "#999999");
so.write("chart");
panel.show();
});
</script>
</body>
</html>
最后的效果：
还不错，打算把它写成一个扩展组件，免得将来使用时麻烦。
Related Items
Comments
Leave a comment
Or, take a look at Archives and Categories
我还不是很喜欢ext，尤其是开始收费以后。
我一般不喜欢用框架，自己感觉out了
我现在编程都习惯只写核心，界面啦、数据啦都是能说明问题就行。