<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0033)http://wap.oschina.net/jqchart.vm -->
<HTML>
<HEAD>
<TITLE>jQchart演示</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="MSHTML 6.00.3790.4555" name=GENERATOR>
<LINK media=screen href="jQchartDemo/thickbox.css" type=text/css rel=stylesheet>
<SCRIPT src="jQchartDemo/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jQchartDemo/jquery.form.js" type=text/javascript></SCRIPT>
<SCRIPT src="jQchartDemo/jquery-ui.min.js" type=text/javascript></SCRIPT>
<SCRIPT src="jQchartDemo/thickbox.js" type=text/javascript></SCRIPT>
<SCRIPT src="jQchartDemo/common.js" type=text/javascript></SCRIPT>
<SCRIPT src="jQchartDemo/jqchart.js" type=text/javascript charset=utf-8></SCRIPT>
<!--[if IE]>
<SCRIPT src="jQchartDemo/excanvas.js" type=text/javascript></SCRIPT>
<![endif]-->
</HEAD>
<BODY>
<script>
$(document).ready(function(){
//--demo1 测试换进是否可用
var chartSetting={data : [ [435,500,600,700,888,777,925] ]};
$('#canvasMyID').jQchart(chartSetting);
//--demo2 添加静态数据预览效果
var chartSetting1={
config : {
title : "Fucking Java web XY线图",
titleLeft: 70,
labelX : ["X1","X2","X3","X4","X5","X6","X7"],
scaleY : {min: 0,max:1000,gap:200},
width: 400, //有影响
height: 300, //有影响
paddingL : 50, //有影响
paddingT : 50 //有影响
},
data : [
[435,500,600,700,888,777,925],
[50,123,312,200,402,300,512],
[100,400,790,640,128,347,567]
]
};
$('#canvasMyID1').jQchart(chartSetting1);
//--demo3 动态获得数据并展现，到了这里，相信做过程序的人都因该知道该怎么办了。
var arr = "[";
//$("#dataTable").each(function(){
$('table > tbody > tr').each(function(){
arr += "["
$(this).find('td').each(function(){arr += $(this).text() + ",";});
arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。
arr += "],";
});
arr = arr.substr(0, arr.length-1); //减1取决于上面","，逗号后的空格。没有空格，所以去掉逗号是减1。
arr += "]";
arr = eval(arr);//这里arr必须以对象的形式赋值给data属性，见下面。
var chartSetting2={
config : {
title : "Fucking Java web XY线图",
titleLeft: 70,
labelX : ["X1","X2","X3","X4","X5","X6","X7"],
scaleY : {min: 0,max:1000,gap:200},
width: 400, //有影响
height: 300, //有影响
paddingL : 50, //有影响
paddingT : 50 //有影响
},
data : arr//这里arr必须以对象的形式赋值给data属性，见上面。
};
$('#canvasMyID2').jQchart(chartSetting2);
});
</script>
<canvas id="canvasMyID"></canvas>
<canvas id="canvasMyID1"></canvas>
<canvas id="canvasMyID2"></canvas>
<!--暂时假设这里的表是动态生成的 -->
<table id="dataTable">
<tr><td>435</td><td>498</td><td>459</td><td>111</td><td>567</td><td>761</td><td>534</td><td>185</td></tr>
<tr><td>356</td><td>908</td><td>312</td><td>222</td><td>290</td><td>999</td><td>123</td><td>491</td></tr>
<tr><td>198</td><td>123</td><td>709</td><td>333</td><td>762</td><td>111</td><td>459</td><td>917</td></tr>
</table>
</BODY>
</HTML>
JqueryChart，js图表，附例子
5星 · 超过95%的资源 需积分: 15 117 浏览量
2012-08-29
19:05:57
上传
评论 1
收藏 127KB RAR 举报 
JqueryChartSimpleDemo.rar （24个子文件） 
SimpleDemo 
nailwlTestEnvironment.htm 1KB jQchart演示.htm 2KB nailwlGetClientDataToCreateChart.htm 3KB jQchartDemo thickbox.css 4KB jqchart.js 20KB excanvas.js 9KB jquery.form.js 23KB common.js 7KB jquery.js 56KB thickbox.js 12KB jquery-ui.min.js 73KB JqueryChartSimpleDemo SimpleDemo nailwlTestEnvironment.htm 1KB 折线图.htm 2KB 折线图改进.htm 2KB 柱状图.htm 2KB nailwlGetClientDataToCreateChart.htm 3KB jQchartDemo thickbox.css 4KB jqchart.js 22KB excanvas.js 9KB jquery.form.js 23KB common.js 7KB jquery.js 56KB thickbox.js 12KB jquery-ui.min.js 73KB
评论25
最新资源