借助 flot 将 HTML 表格中的内容变成图形

来源:互联网 发布:网络推广怎么拿提成 编辑:程序博客网 时间:2024/03/28 18:38

必须引入的包:

 

 <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>

 

js 下载地址:http://sujian.javaeye.com/admin/blogs/859866

 

 

原创粉丝点击