FusionChartsFree的简单用法

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5. <title>结果显示</title>  
  6. <script type="text/javascript" src="FusionCharts.js"></script>  
  7. </head>  
  8. <body class="mainpage">  
  9. <xmp id="chartData" style="display:none;">  
  10. <graph caption='结果柱状图' xAxisName='企业名称' yAxisName='得分' decimalPrecision='0'    
  11. formatNumberScale='0' chartRightMargin='30'>  
  12.     <set name="企业1" value="75" color="0000ff"/>  
  13.     <set name="企业2" value="55" color="0000ff"/>  
  14.     <set name="企业3" value="65" color="0000ff"/>  
  15.     <set name="企业4" value="35" color="0000ff"/>  
  16.     <set name="企业5" value="95" color="0000ff"/>  
  17. </graph>  
  18. </xmp>  
  19. <div id="chartdiv" style="text-align:center;">FusionCharts. </div>  
  20. <script type="text/javascript">  
  21.     var chart = new FusionCharts("FCF_Column3D.swf", "ChartId", "600", "360");   
  22.     chart.setDataXML(document.getElementById('chartData').innerText);             
  23.     chart.render("chartdiv");   
  24. </script>  
  25. </center>  
  26. </body>  
  27. </html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>结果显示</title>
<script type="text/javascript" src="FusionCharts.js"></script>
</head>
<body class="mainpage">
<xmp id="chartData" style="display:none;">
<graph caption='结果柱状图' xAxisName='企业名称' yAxisName='得分' decimalPrecision='0' 
formatNumberScale='0' chartRightMargin='30'>
	<set name="企业1" value="75" color="0000ff"/>
	<set name="企业2" value="55" color="0000ff"/>
	<set name="企业3" value="65" color="0000ff"/>
	<set name="企业4" value="35" color="0000ff"/>
	<set name="企业5" value="95" color="0000ff"/>
</graph>
</xmp>
<div id="chartdiv" style="text-align:center;">FusionCharts. </div>
<script type="text/javascript">
	var chart = new FusionCharts("FCF_Column3D.swf", "ChartId", "600", "360");
	chart.setDataXML(document.getElementById('chartData').innerText);		   
	chart.render("chartdiv");
</script>
</center>
</body>
</html>

　　使用xmp元素来放置图表所需的xml数据，便于调试也简化了前后台的代码，可以使用jstl来生成xml数据，很方便。图表没有设置好看的颜色，凑和着看吧。


　　全部代码请从附件下载。更多的样式图表样式可以从官方网站下载。

　　目前发现一个问题：X轴如果是中文，设置旋转后不显示。Y轴的中文如果竖向也是不显示的，横过来才可以。
　　用收费的V3版试了一下，中文没有任何问题。喜欢不花钱也办事的人可以去网上找高手Crack的版本。
  • 大小: 32.9 KB

posted on 2011-07-12 17:36  回到未来看历史  阅读(110)  评论(0)    收藏  举报

导航