您的位置：首页 > 编程语言 > Java开发

Java应用程序项目的打包与发行

2008-06-01 14:57 288 查看

1 建立一个chart的html文件，即chart.html

<html>
<head>
<title>chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>

<script type="text/javascript" src="Js/return_board/chart.js"></script>
</head>
<body>
<div id='container'></div>
</body>
</html>

2 建立文件charts.js

Ext.chart.Chart.CHART_URL = 'Extjs/resources/charts.swf';

Ext.onReady(function(){
var data= [
{name:'Jul 07', visits: 245000, views: 300000},
{name:'Aug 07', visits: 240000, views: 350000},
{name:'Sep 07', visits: 355000, views: 400000},
{name:'Oct 07', visits: 375000, views: 420000},
{name:'Nov 07', visits: 490000, views: 450000},
{name:'Dec 07', visits: 495000, views: 580000},
{name:'Jan 08', visits: 520000, views: 600000},
{name:'Feb 08', visits: 620000, views: 750000}
]

var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({}, [
{name: 'name'},
{name: 'visits',type:'int'},
{name: 'views',type:'int'}
])
});
store.load();
// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend',
applyTo: 'container',
width:500,
height:300,
layout:'fit',
items:{
xtype: 'linechart',
store: store,
xField: 'name',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
},
series: [{//列
type: 'line', //类型可以改变（线）
displayName: 'Good',
yField: 'views',
style: {
color:0x00BB00
}
},{
type:'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0xE1E100
}
}]

}
});
});

3 运行的时候启动自己已有的本地服务器，若没有启动，则运行效果如下：

启动后运行效果：

总结：

掌握series的基本用法。

折线图除了可以看数据的波动情况外，还可以分析数据的吻合情况。

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

标签：

相关文章推荐

新的分享

章节导航