FCF筆記二

時間 2019-11-12

標籤 fcf 筆記简体版

原文原文鏈接

前面寫了第一個FCF應用，能夠發現頁面的代碼量很是大，這一點在應用中，是很是不合理的，爲此，FCF爲咱們封裝了一些列的數據，使得咱們能夠方便構造一個漂亮的Chart圖。好了，直接上代碼： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/FusionCharts.js"></script> <title>銷售額度柱形圖</title> </head> <body bgcolor="#fffff">  <div id="chartdiv" align="center"> 存放fusionChartsdiv區域1 </div> <script type="text/javascript"> var myCharts = new FusionCharts("FusionCharts/Column3D.swf","chartsId1","400","300"); myCharts.setDataURL("data/Data.xml"); myCharts.render("chartdiv"); </script>  <div id="chartdiv1" align="center"> 存放fusionChartsdiv區域2 </div> <script type="text/javascript"> var myChart1 =new FusionCharts("FusionCharts/Pie3D.swf","chartsId2","400","300"); myChart1.setDataURL("data/Data.xml"); myChart1.render("chartdiv1"); </script>  <div id="chartdiv2" align="center"> 存放fusionCharts區域3 </div> <script type="text/javascript"> var myChart2 = new FusionCharts("FusionCharts/Line.swf","chartsId3","400","300"); myChart2.setDataURL("data/Data.xml"); myChart2.render("chartdiv2"); </script> </body> </html> 上面是一個擁有三個chart圖的頁面簡單梳理下實現過程：一、首先要將js文件（FusionCharts.js）cp到項目中，並正確引入到頁面中；二、建立一個div，用於渲染chart圖；三、在div後構建一段js代碼，在其中要作的工做有：建立一個FusionCharts對象，而且設置其構造參數（包括引入的SWF文件位置、該chart圖的id、長與寬）；四、設置data數據的來源（URL）；五、設置渲染的div（指定id）。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。