FusionCharts 学习笔记(一)

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

看看效果吧:

FusionCharts 学习笔记(一)_第1张图片

<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)