jQuery实用的图表插件ecxcanvas.js

使用方法：

引入相关文件

<link href="css/basic.css" type="text/css" rel="stylesheet" />
<link href="css/visualize.css" type="text/css" rel="stylesheet" />
<link href="css/visualize-dark.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<script type="text/javascript" src="js/visualize.jQuery.js"></script>

插件初始化、参数配置

$(function(){	
	$('table').visualize({type: 'pie', height: '250px', width: '370px'});
	$('table').visualize({type: 'bar', width: '370px'});
	$('table').visualize({type: 'area', width: '370px'});
	$('table').visualize({type: 'line', width: '370px'});
	
	$('table td')
		.click(function(){
			if( !$(this).is('.input') ){
				$(this).addClass('input')
					.html('<input type="text" value="'+ $(this).text() +'" />')
					.find('input').focus()
					.blur(function(){
						//remove td class, remove input
						$(this).parent().removeClass('input').html($(this).val() || 0);
						//update charts	
						$('.visualize').trigger('visualizeRefresh');
					});					
			}
		})
		.hover(function(){ $(this).addClass('hover'); },function(){ $(this).removeClass('hover'); });
});

HTML结构

<div class="demo">
	<a class="btndemo" href="index.html">演示一</a>
    <a class="btndemo" href="filtering.html">演示二</a>
    <a class="btndemo" href="default.html">演示三</a>
    <a class="btndemo" href="vanilla.html">演示四</a>
	<table style="width:100%;margin:40px 0 0 0;">
		<caption>2009年员工产品销售走势图</caption>
		<thead>
			<tr>
				<td></td>
				<th scope="col">food</th>
				<th scope="col">auto</th>
				<th scope="col">household</th>
				<th scope="col">furniture</th>
				<th scope="col">kitchen</th>
				<th scope="col">bath</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">Mary</th>
				<td>190</td>
				<td>160</td>
				<td>40</td>
				<td>120</td>
				<td>30</td>
				<td>70</td>
			</tr>
			<tr>
				<th scope="row">Tom</th>
				<td>3</td>
				<td>40</td>
				<td>30</td>
				<td>45</td>
				<td>35</td>
				<td>49</td>
			</tr>
			<tr>
				<th scope="row">Brad</th>
				<td>10</td>
				<td>180</td>
				<td>10</td>
				<td>85</td>
				<td>25</td>
				<td>79</td>
			</tr>
			<tr>
				<th scope="row">Kate</th>
				<td>40</td>
				<td>80</td>
				<td>90</td>
				<td>25</td>
				<td>15</td>
				<td>119</td>
			</tr>		
		</tbody>
	</table>
</div>