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