2010.03.11(2)——FusionChartsFree多系列图形

lipeng88213

浏览: 938496 次
性别:
来自: 北京

最近访客更多访客>>

jklwan

小小书僮

诗人lpp

oyhptiandi01

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (526)

社区版块

存档分类

Java XML JSP 浏览器 HTML

2010.03.11(2)——FusionChartsFree多系列图形
多系列图形被用来比较两个或更多的数据集。

=================================================================
second.xml
=================================================================

<graph xaxisname="Continent" yaxisname="Export" hovercapbg="DEDEBE" hovercapborder="889E6D" rotateNames="0" yAxisMaxValue="100" numdivlines="9" divLineColor="CCCCCC" divLineAlpha="80" decimalPrecision="0" showAlternateHGridColor="1" AlternateHGridAlpha="30" AlternateHGridColor="CCCCCC" caption="Global Export" subcaption="In Millions Tonnes per annum pr Hectare">
 <categories font="Arial" fontSize="11" fontColor="000000">
  <category name="N. America" hoverText="North America" /> 
  <category name="Asia" /> 
  <category name="Europe" /> 
  <category name="Australia" /> 
  <category name="Africa" /> 
  </categories>
 <dataset seriesname="Rice" color="FDC12E">
  <set value="30" /> 
  <set value="26" /> 
  <set value="29" /> 
  <set value="31" /> 
  <set value="34" /> 
  </dataset>
 <dataset seriesname="Wheat" color="56B9F9">
  <set value="67" /> 
  <set value="98" /> 
  <set value="79" /> 
  <set value="73" /> 
  <set value="80" /> 
  </dataset>
 <dataset seriesname="Grain" color="C9198D">
  <set value="27" /> 
  <set value="25" /> 
  <set value="28" /> 
  <set value="26" /> 
  <set value="10" /> 
  </dataset>
  </graph>

解释一下：
1.subcaption：这个是副标题
2.<categories><category></category></categories>：每个<category>就表示X 轴上的一个名称
3.<category name="N. America" hoverText="North America" />：name是x轴显示的名字，hoverText是鼠标移上去显示的名字
4.showLegend：默认是1，是否显示系列名
=================================================================
jsp
=================================================================

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My First </title>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>
<body bgcolor="#ffffff">　　
  <div id="chartDiv" align="center">对不起，有错误</div>
  <script type="text/javascript">
     var myChart = new FusionCharts("FusionCharts/FCF_MSColumn3D.swf", "myChartId", "600", "350");
     myChart.setDataURL("xml/second.xml");       
     myChart.render("chartDiv"); 
  </script>
</body>
</html>

注意：
1.
柱状图     FCF_Column3D.swf
折线图 FCF_Line.swf
饼状图 FCF_Pie2D.swf

多系列柱状图    FCF_MSColumn3D.swf
多系列折线图 FCF_MSLine.swf饼状图          没有
2.
注意是setDataURL，而不是setDataXML
因为：
我们知道，在使用GET 方法得到参数时，浏览器对参数值的长度是有一定的限制的，所
以，如果XML 字符过长，可能会产生问题。这时我们就需要使用setDataURL()方法。
如果你的XML 字符里含有双字节字符，例如中文字符，你就不能使用setDataXML()方法，
你应该使用setDataURL()方法

分享到：