您的位置：首页 > 其它

FusionCharts 学习笔记(一)

2014-02-10 17:37 204 查看

FusionCharts是以一个用于显示数据图表的插件，支持多种语言，如java,C++,PHP
等等。FusionChart 有着非常好的多平台性，因为其是借用Adobe来实现其动态效果，现在的主流浏览器都支持adobe ，所以，FusionCharts 的兼容性是毋庸置疑，非常良好的，而且，fusionCharts 的显示效果非常的绚丽，现在的charts插件很多，FusionCharts 是其中非常优秀的一款。好了废话不多说了，现在开始一步一步的去学习如何使用FusionChart.

看看效果吧：

<Area2D>

1.要使用FusionChart 必要导入其相关js:FusionCharts.js。

2.要实现<Area2D>的动态显示效果，你还需要一个必不可少的swf文件。

3.下面我们开始第一个FusionChartDemo。

Area2D.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" xml:lang="zh" lang="zh" dir="ltr">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts--Area2D</title>
<script language="JavaScript" src="FusionCharts.js"></script>
</head>
<body>
<div id="chartdiv" align="center"></div>
<script language="JavaScript">
/* 加载动画类型设置一个id任意宽高 */
var myChart = new FusionCharts("Area2D.swf", "myChartId", "800", "300");
/*加载所要显示的数据 */
myChart.setDataURL("Area2D.xml");
/*对指定位置id的div进行绘制图表 */
myChart.render("chartdiv");
</script>
</br>
</body>
</html>
Area2D.xml
如果是从官网下载的Demo和js的话，将Demo中的内容复制到你自己的xml上时，有时会出现乱码，这个问题很好解决，

在你的XML上将字符集设置为GBK就可以了。

多种破解swf及全部样式Demo下载：http://download.csdn.net/detail/u011986449/6910235

<chart palette="2" caption="深圳华强北销售统计" subcaption="2014年" xAxisName="月份" yAxisMinValue="15000" yAxisName="销售额" numberPrefix="$" showValues="0" baseFont="Arial" baseFontSize="12" rotateYAxisName='0' chartRightMargin="40">
<set label="一月" value="462" />
<set label="二月" value="857" />
<set label="三月" value="671" />
<set label="四月" value="494" />
<set label="五月" value="761" />
<set label="六月" value="960" />
<set label="七月" value="629" />
<set label="八月" value="622" />
<set label="九月" value="376" />
<set label="十月" value="494" />
<set label="十一月" value="761" />
<set label="十二月" value="960" />
<styles>
<definition>
<style name="Anim1" type="animation" param="_xscale" start="0" duration="1" />
<style name="Anim2" type="animation" param="_alpha" start="0" duration="1" />
<style name="DataShadow" type="Shadow" alpha="20" />
</definition>
<application>
<apply toObject="DIVLINES" styles="Anim1" />
<apply toObject="HGRID" styles="Anim2" />
<apply toObject="DATALABELS" styles="DataShadow,Anim2" />
</application>
</styles>
</chart>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： FusionCharts

相关文章推荐

新的分享

章节导航