首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

FusionChartsFree的容易用法

2012-10-27 
FusionChartsFree的简单用法  今天发现个不错的显示图表的东西----FusionChartsFree,有免费版的,有收费版

FusionChartsFree的简单用法
  今天发现个不错的显示图表的东西----FusionChartsFree,有免费版的,有收费版的,免费版的我用着就不错。收费的可能更好一点儿。
  看了看官方提供的例子,我是在JSP中使用,想到一个简单的用法,贴在下面:

<!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 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的版本。

热点排行