动态表格提供数据源给饼图（FusionChart）

niulanshan

浏览: 564131 次

最近访客更多访客>>

扶起之秀

qijojo

qy86615069

yungaoyue2005

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1540)

社区版块

存档分类

1、新建web项目，在WebContent目录下新建DPie3D.html；

DPie3D.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼图数据有表格提供</title>
<script type="text/javascript" src="../Scripts/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../Scripts/JS/FusionCharts.js"></script>
<style type="text/css">
   body{
     width:80%;
     height:80%;
     font-size: 12px;
     background-color: #FFCCCC;
   }
   .body_div{
     width:100%;
     height:100%;
     text-align: center;
     vertical-align: middle;
   }
   .div_table{
     text-align:center;
     border:1px solid #996699;
   }
   .tr_th{
     background-color: #CCCCCC;
   }
</style>
<script type="text/javascript">
	function piechart()
	{
	  // 获取表格中的值
	  var apples = document.getElementById("apple").value;
	  var apricotss = document.getElementById("apricots").value;
	  var plums = document.getElementById("plum").value;
	  var pears = document.getElementById("pear").value;
	  var cherrys = document.getElementById("cherry").value;
	  var grapes = document.getElementById("grape").value;
	  var grapefruits = document.getElementById("grapefruit").value;
	  var lemons = document.getElementById("lemon").value;
	                
	  // 从表格中生成数据传递到饼图中
	  var chartXMLData = "";
	  chartXMLData += "<chart caption='水果数量统计' baseFontSize='12'>";
	  chartXMLData += "<set label='苹果' value='" + apples + "' />";
	  chartXMLData += "<set label='杏子' value='" + apricotss + "' />";
	  chartXMLData += "<set label='李子' value='" + plums + "' />";
	  chartXMLData += "<set label='梨子' value='" + pears + "' />";
	  chartXMLData += "<set label='樱桃' value='" + cherrys + "' />";
	  chartXMLData += "<set label='葡萄' value='" + grapes + "' />";
	  chartXMLData += "<set label='柚子' value='" + grapefruits + "' />";
	  chartXMLData += "<set label='柠檬' value='" + lemons + "' />";
	  chartXMLData += "</chart>";
	                
	  //生成饼图
	  var pieChart = new FusionCharts( "../Scripts/FusionChart/Pie3D.swf", "pieChartId", "1300", "450", "0" );
	  pieChart.setXMLData( chartXMLData );
	  pieChart.render( "pie" );
	}
</script>
</head>
<body>
  <div class="body_div">
     <table class="div_table">
         <tr class="tr_th">
           <th>苹果</th>
           <th>杏子</th>
           <th>李子</th>
           <th>梨子</th>
           <th>樱桃</th>
           <th>葡萄</th>
           <th>柚子</th>
           <th>柠檬</th>
         </tr>
         <tr>
           <td>
             <input type="text" id="apple"/>
           </td>
           <td>
             <input type="text" id="apricots"/>
           </td>
           <td>
             <input type="text" id="plum"/>
           </td>
           <td>
             <input type="text" id="pear"/>
           </td>
           <td>
             <input type="text" id="cherry"/>
           </td>
           <td>
             <input type="text" id="grape"/>
           </td>
           <td>
             <input type="text" id="grapefruit"/>
           </td>
           <td>
             <input type="text" id="lemon"/>
           </td>
         </tr>
     </table>
     <input name="button" type='button' value="生成饼图" onclick="piechart();" />
     <div id="pie"></div>
  </div>
</body>
</html>

2、运行http://localhost:8080/FusionChart/HTML/DPie3D.html，结果如下图：

（1）未做任何操作