ExtJs 绘制拆线图
chart.js
Ext.chart.Chart.CHART_URL = 'ext3.2/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
}
}]
}
});
});
chart.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 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>gridPanel</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link> <script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext3.2/ext-all.js"></script> <script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="js/chart.js"></script> </head> <body> <div id="container"> </div> </body> </html>