このアニメーションJQuery、CSS、およびHTMLバーグラフにバーを追加する方法

私のWebアプリケーションでgraph explained in this websiteを使用しようとしています。私は私の会社の各部門の毎月の統計を表示するためにそれを使用したいと思います。だから伝説では、私は部門名（私は7つの部門を持っている）を列挙することができました。今私はグラフに7つの棒を作成したいが、私はそれを行うことができませんでした。グラフにバーを追加する方法を教えてもらえますか？このアニメーションJQuery、CSS、およびHTMLバーグラフにバーを追加する方法

私のHTMLコード：

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=1024"> 
     <title>Example 3 - Animated Bar Chart via jQuery</title> 
     <link rel="stylesheet" href="css/common.css"> 
     <link rel="stylesheet" href="css/03.css"> 
    </head> 

    <body> 
     <div class="toggles"> 
      <p><a href="#" id="reset-graph-button">Reset graph</a> 
      Mouse over the bars to display information.</p> 
     </div> 
     <div id="wrapper"> 
      <div class="chart"> 
       <h2>PMOD Divisions' Safety Training Record</h2> 

       <table id="data-table" border="1" cellpadding="10" cellspacing="0" summary="The effects of the zombie outbreak on the populations of endangered species from 2012 to 2016"> 
        <caption>Population in thousands</caption> 
        <thead> 
         <tr> 
          <td>&nbsp;</td> 
          <th scope="col">September</th> 
          <th scope="col">October</th> 
          <th scope="col">November</th> 
          <th scope="col">December</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 

          <th scope="row">A</th> 
          <td>4080</td> 
          <td>6080</td> 
          <td>6240</td> 

         </tr> 
         <tr> 
          <th scope="row">E</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">D</th> 
          <td>1040</td> 
          <td>1760</td> 
          <td>2880</td> 
         </tr> 
         <tr> 
          <th scope="row">PE</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">OD</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">ES</th> 
          <td>5680</td> 
          <td>6770</td> 
          <td>5760</td> 
         </tr> 
         <tr> 
          <th scope="row">SS</th> 
          <td>5680</td> 
          <td>6880</td> 
          <td>5760</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 

     <!-- JavaScript at the bottom for fast page loading --> 


     <!-- Grab jQuery from Google --> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

     <!-- Example JavaScript --> 
     <script src="js/03.js"></script> 

    </body> 
</html>

出典

2011-12-16 user1093651