借助 flot 将 HTML 表格中的内容变成图形
必须引入的包：
?
?<script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.flot.js"></script>
??? ??? <script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/jquery.graphTable-0.2.js"></script>
??? ??? <script type="text/javascript" src="<%=host%>/iot/xx/zytj/js/excanvas.js"></script>
<script type="text/javascript" src="<%=host%>/js/jquery-1.4.3.min.js"></script>
?
以下是jsp 例子：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
? <head>
??? <script type="text/javascript" src="/ceshi/js/jquery-1.4.3.min.js"></script>
??? <script type="text/javascript" src="/ceshi/js/jquery.flot.js"></script>
??? <script type="text/javascript" src="/ceshi/js/jquery.graphTable-0.2.js"></script>
??? <script type="text/javascript" src="/ceshi/js/excanvas.js"></script>
??? <style>
????? body {
??????? font-family:Arial;
????? }
????? div.flot-graph {
??????? margin:20px 0;
????? }
????? p {
??????? padding:4px 2px;
??????? background-color:#eee;
??????? border:1px solid #ccc;
??????? font-family:Courier;
????? }
????? table {
??????? text-align:center;
????? }
????? table caption {
??????? text-align:left;
??????? font-weight:bold;
??????? margin:20px 0 0 0;
????? }
??? </style>
? </head>
? <body>
??? <table border="1" cellpadding="2" id="table1" width="500">
????? <thead>
??????? <caption>Table 1: Graph by columns</caption>
??????? <tr>
????????? <th></th>
????????? <th>col1</th>
????????? <th>col2</th>
????????? <th>col3</th>
??????? </tr>
????? </thead>
????? <tbody>
??????? <tr>
????????? <th>1</th>
????????? <td>10</td>
????????? <td>20</td>
????????? <td>30</td>
??????? </tr>
??????? <tr>
????????? <th>2</th>
????????? <td>20</td>
????????? <td>40</td>
????????? <td>60</td>
??????? </tr>
??????? <tr>
????????? <th>3</th>
????????? <td>40</td>
????????? <td>80</td>
????????? <td>120</td>
??????? </tr>
????? </tbody>
??? </table>
??? <p>$('#table1').graphTable({series: 'columns'});</p>
??? <input type="submit" onclick="$('#table1').graphTable({series: 'columns'}); $(this).remove();" value="go" />
??? <table border="1" cellpadding="2" id="table2" width="500">
????? <thead>
??????? <caption>Table 2: Graph by rows</caption>
??????? <tr>
????????? <th></th>
????????? <th>1</th>
????????? <th>2</th>
????????? <th>3</th>
??????? </tr>
????? </thead>
????? <tbody>
??????? <tr>
????????? <th>row1</th>
????????? <td>10</td>
????????? <td>20</td>
????????? <td>30</td>
??????? </tr>
??????? <tr>
????????? <th>row2</th>
????????? <td>20</td>
????????? <td>40</td>
????????? <td>60</td>
??????? </tr>
??????? <tr>
????????? <th>row3</th>
????????? <td>40</td>
????????? <td>80</td>
????????? <td>120</td>
??????? </tr>
????? </tbody>
??? </table>
??? <p>$('#table2').graphTable({series: 'rows'});</p>
??? <input type="submit" onclick="$('#table2').graphTable({series: 'rows'}); $(this).remove();" value="go" />
??? <table border="1" cellpadding="2" id="table3" width="500">
????? <thead>
??????? <caption>Table 3: Graph by rows, replace currency symbol</caption>
??????? <tr>
????????? <th></th>
????????? <th>1</th>
????????? <th>2</th>
????????? <th>3</th>
??????? </tr>
????? </thead>
????? <tbody>
??????? <tr>
????????? <th>row1</th>
????????? <td>$10</td>
????????? <td>$20</td>
????????? <td>$30</td>
??????? </tr>
??????? <tr>
????????? <th>row2</th>
????????? <td>$20</td>
????????? <td>$40</td>
????????? <td>$60</td>
??????? </tr>
??????? <tr>
????????? <th>row3</th>
????????? <td>$40</td>
????????? <td>$80</td>
????????? <td>$120</td>
??????? </tr>
????? </tbody>
??? </table>
??? <p>$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } });</p>
??? <input type="submit" onclick="$('#table3').graphTable({series: 'rows', dataTransform: function(s) { return(s.replace('$','')); } }); $(this).remove();" value="go" />
? </body>
</html>
