学步园

工程官网:http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/

代码下载:http://sites.google.com/site/fdszlzlin/Home/jquery-1/jquery-chats/fgCharting.jQuery.rar?attredirects=0

 

 

数据TABLE

 

 

<table id="dataTable" summary="Member Data from 2000 to 2006">
<caption>Member Data from 2000 to 2006</caption>
<thead>
<tr>
<td></td>
<th id="2000">2000</th>
<th id="2001">2001</th>
<th id="2002">2002</th>
<th id="2003">2003</th>
<th id="2004">2004</th>
<th id="2005">2005</th>
<th id="2006">2006</th>
</tr>
</thead>
<tfoot>

</tfoot>
<tbody>
<tr>
<th headers="members">Mary</th>
<td headers="2000">150</td>
<td headers="2001">160</td>
<td headers="2002">40</td>
<td headers="2003">120</td>
<td headers="2004">30</td>
<td headers="2005">70</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Tom</th>
<td headers="2000">3</td>
<td headers="2001">40</td>
<td headers="2002">30</td>
<td headers="2003">45</td>
<td headers="2004">35</td>
<td headers="2005">49</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Brad</th>
<td headers="2000">10</td>
<td headers="2001">00</td>
<td headers="2002">10</td>
<td headers="2003">85</td>
<td headers="2004">25</td>
<td headers="2005">79</td>
<td headers="2006">70</td>
</tr>
<tr>
<th headers="members">Kate</th>
<td headers="2000">40</td>
<td headers="2001">80</td>
<td headers="2002">90</td>
<td headers="2003">25</td>
<td headers="2004">15</td>
<td headers="2005">119</td>
<td headers="2006">200</td>
</tr> 
</tbody>
</table>

图表HTML

 <canvas id="chart1" class="fgCharting_src-dataTable_type-pie" width="400" height="400"></canvas>

 

(用class关联数据及样式)

fgCharting_src-数据表ID_type-类型

line

filledLine

additiveLine

additiveFilledLine

pie

bar

additiveBar