fusioncharts 数据报表 (1)

ifconfig 2012-11-27

一.最近要做fusioncharts方面的东西,以前没接触过,所以就粗略的了解了一下。把我觉得不错的写下来。做完项目会继续完善和深入。毕竟现在只是个热身。首先说说怎么直接在html里面引入报表吧。

fusioncharts没多大,在FusionChartsFree>Charts里面方有swf文件。就是我们要创建报表的类似模板flash吧。要创建哪个就引入哪个,然后需要准备数据,数据是xml特定格式的。这个必须按规范来。其格式如下:

1<graphcaption='每月销售额柱形图'xAxisName='月份'yAxisName='Units'showNames='1'decimalPrecision='0'formatNumberScale='0'>  

 2  <setname='一月'value='462'color='AFD8F8'/>  

 3  <setname='二月'value='857'color='F6BD0F'/>  

 4  <setname='三月'value='671'color='8BBA00'/>  

 5  <setname='四月'value='494'color='FF8E46'/>  

 6  <setname='五月'value='761'color='008E8E'/>  

 7  <setname='六月'value='960'color='D64646'/>  

 8  <setname='七月'value='629'color='8E468E'/>  

 9  <setname='八月'value='622'color='588526'/>  

10  <setname='九月'value='376'color='B3AA00'/>  

11  <setname='十月'value='494'color='008ED6'/>  

12  <setname='十一月'value='761'color='9D080D'/>  

13  <setname='十二月'value='960'color='A186BE'/>  

14</graph> 

上面的代码里,有一个叫<graph>的root元素,它还有一些属性,用来定义标题,坐标轴,数值格式。我们还看到有很多<set>元素,它用来描述数据。name属性用来表示月份名称,value属性表示销售额,color属性表示图形颜色。

然后创建html:

<html>  

<head>  

 <title>MyFirstFusionCharts</title>  

</head>  

<bodybgcolor="#ffffff">  

 

</body>  

</html>  

movie指定我们的swf文件,FlashVars参数值用来指定XML文件的路径以及图形的宽和高。

现在打开html就可以看到一个3D的柱状图了。如果没有显示就看看是不是数据的格式不对,或者是引入路径和swf路径的问题。如果都对了那么可能是浏览器没有设置或安装flash。

二.上面讲的是用html直接来做的, 实际上,我们还可以使用FCF提供的一个JavaScript类来加载图形。使用JavaScript的方式有几个好处,一是代码量大大减少,特别是当一个页面上有几个图形时。二是代码更加直观。三是可以避免IE出现“单击以激活使用这个控件”的提示。

下面是html代码:

<html>  

 <head>  

 <scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script>  

 </head>    

<bodybgcolor="#ffffff">  

   
图形将出现这个DIV里,到时这里的字将被图形替代。
  

 <scripttype="text/javascript">  

 varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId","600","500");   

 myChart.setDataURL("Data.xml");   

 myChart.render("chartdiv");   

 </script>  

</body>  

</html> 

<scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script> 

 然后,我们定义了一个DIV,它还有个id。

  
图形将出现这个DIV里,到时这里的字将被图形替代。
 

我们的图形就出现在这个DIV里。

接着,我们用四个参数建立了一个FusionCharts对象,

varmyChart=newFusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId","600","500"); 

第一个参数是SWF文件的地址。

第二个是图形的id。这个id你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有多个图形的时候,这个id一定要是唯一的。

第三个参数是图形的宽。

第四个参数是图形的高。

我们还要设置数据文件的地址。

myChart.setDataURL("Data.xml");  

最后,我们把图形渲染在指定的地方。

myChart.render("chartdiv");  

"chartdiv"就是前面的DIV的id,这就表示把图形render到"chartdiv"。

现在你运行JSChart.html,你会看到同Chart.html一样的效果。很显然使用JavaScript加载图形,更方便,更直观。

如果一个页面有多个表怎么办?其实很简单:

<html>  

<head><title>多图形</title>    

<scriptlanguage="JavaScript"src="../FusionCharts/FusionCharts.js"></script>  

</head>  

<bodybgcolor="#ffffff">  

  
First Chart Container Pie 3D
  

<scripttype="text/javascript">  

varmyChart1=newFusionCharts("../FusionCharts/FCF_pie3D.swf","myChartId1","600","400");    

myChart1.setDataURL("Data.xml");    

myChart1.render("chartdiv1");   

</script>  

 
Second Chart Container Column 3D
  

<scripttype="text/javascript">  

varmyChart2=newFusionCharts("../FusionCharts/FCF_Column3D.swf","myChartId2","600","300");    

myChart2.setDataURL("Data.xml");    

myChart2.render("chartdiv2");   

</script>  

 
Third Chart Container Line 2D
  

<scripttype="text/javascript">  

varmyChart3=newFusionCharts("../FusionCharts/FCF_line.swf","myChartId3","600","300");    

myChart3.setDataURL("Data.xml");    

myChart3.render("chartdiv3");   

</script>  

 
Fourth Chart Container Area 2D
  

<scripttype="text/javascript">  

varmyChart4=newFusionCharts("../FusionCharts/FCF_area2D.swf","myChartId4","400","250");    

myChart4.setDataURL("Data.xml");    

myChart4.render("chartdiv4");   

</script>  

</body>  

</html>   

这里不同的就是:加载的swf、div的id和FusionCharts对象的名称。

如果要把柱状图换成饼状图或者其他的数据格式不用变化,引入相应的swf就行,是不是非常方便。这只是个人理解的有不对的还望指出一起学习。

相关推荐