Google 統計圖表:HTML5/JavaScript

畫面


原始程式

<html>
   <head>
      <meta charset="utf-8">
      <title>繪製餅圖</title>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
         google.load("visualization", "1", {packages:["corechart"]});
         google.setOnLoadCallback(drawChart);
         
         function goPaining() {
         
           var data = google.visualization.arrayToDataTable([
             [document.getElementById('F0').value, document.getElementById('V0').value],
             [document.getElementById('F1').value, parseFloat(document.getElementById('V1').value)],
             [document.getElementById('F2').value, parseFloat(document.getElementById('V2').value)],
             [document.getElementById('F3').value, parseFloat(document.getElementById('V3').value)],
             [document.getElementById('F4').value, parseFloat(document.getElementById('V4').value)],
             [document.getElementById('F5').value, parseFloat(document.getElementById('V5').value)]
           ]);
         
           var options = {
             title: document.getElementById('RPT').value
           };
         
           var chart = new google.visualization.PieChart(document.getElementById('piechart'));
         
           chart.draw(data, options);
         }
      </script>
   </head>
   <body>
      <form>
         <table border='1'>
            <tr>
               <td bgcolor='silver'>圖表名稱:</td>
               <td><input type='text' id='RPT' value='活動表'></td>
            </tr>
            <tr>
               <td><input type='text' id='F0' value='活動'></td>
               <td><input type='text' id='V0' value='小時數'></td>
            </tr>
            <tr>
               <td><input type='text' id='F1' value='工作'></td>
               <td><input type='number' id='V1' value='11'></td>
            </tr>
            <tr>
               <td><input type='text' id='F2' value='用餐'></td>
               <td><input type='number' id='V2' value='2'></td>
            </tr>
            <tr>
               <td><input type='text' id='F3' value='通勤'></td>
               <td><input type='number' id='V3' value='2'></td>
            </tr>
            <tr>
               <td><input type='text' id='F4' value='休閒'></td>
               <td><input type='number' id='V4' value='2'></td>
            </tr>
            <tr>
               <td><input type='text' id='F5' value='睡眠'></td>
               <td><input type='number' id='V5' value='7'></td>
            </tr>
            <tr>
               <td colspan='2' align='center'><input type='button' value='繪圖' onClick='goPaining()'></td>
            </tr>
         </table>
      </form>
      <hr>
      <div id="piechart" style="width: 800px; height: 600px;"></div>
   </body>
</html>

進階版

ċ
ShowPieChart.html
(2k)
李智,
Nov 11, 2014, 9:54 PM