fusioncharts多折线图

       在项目目录下,新建文件夹Gallery存放jsp文件、datas存放xml文件、FusionCharts存放swf文件、新建js文件夹存放js文件。

       将FCF_MSLine.swf放置在FusionCharts下。

          将FusionCharts.js放置在jS文件夹下。

          在datas下新建MSLine.xml,代码如下:

<graph caption='Daily Visits' 

  subcaption='(from 8/6/2006 to 8/12/2006)' 

  hovercapbg='FFECAA'              

  hovercapborder='F47E00' 

  formatNumberScale='0' 

  decimalPrecision='0' 

  showvalues='0' 

  numdivlines='3' 

  numVdivlines='0' 

  yaxisminvalue='1000' 

  yaxismaxvalue='1800'  

  rotateNames='1' >

   <!--caption 图表主标题,    

  subcaption 图表副标题,       

  hoverCapBgColor 悬停说明框背景色,6位16进制颜色值,

  hoverCapBorderColor 悬停说明框边框颜色,6位16进制颜色值

  formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K(千)

  decimalPrecision 指定小数位的位数, [0-10]    例如:='0' 取整

  showValues 是否在图表显示对应的数据值,默认为1(True)

  numDivLines     画布内部水平分区线条数,数字

  numVDivLines    画布内部垂直分区线条数,数字.

  yAxisMinValue   指定纵轴(y轴)最小值,数字

  yAxisMaxValue   指定纵轴(y轴)最小值,数字

  rotateNames     是否旋转显示标签,默认为0(False):横向显示

  -->

<categories >

<category name='8/6/2006' />

<category name='8/7/2006' />

<category name='8/8/2006' />

<category name='8/9/2006' />

<category name='8/10/2006' />

<category name='8/11/2006' />

<category name='8/12/2006' />

 

</categories>

<dataset seriesName='Offline Marketing' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>

<set value='1327' />

<set value='1826' />

<set value='1699' />

<set value='1511' />

<set value='1904' />

<set value='1957' />

<set value='1296' />

</dataset>

 

<dataset seriesName='Search' color='F1683C' anchorBorderColor='F1683C' anchorBgColor='F1683C'>

<set value='2042' />

<set value='3210' />

<set value='2994' />

<set value='3115' />

<set value='2844' />

<set value='3576' />

<set value='1862' />

</dataset>

 

<dataset seriesName='Paid Search' color='2AD62A' anchorBorderColor='2AD62A' anchorBgColor='2AD62A'>

<set value='850' />

<set value='1010' />

<set value='1116' />

<set value='1234' />

<set value='1210' />

<set value='1054' />

<set value='802' />

</dataset>

 

<dataset seriesName='From Mail' color='DBDC25' anchorBorderColor='DBDC25' anchorBgColor='DBDC25'>

<set value='541' />

<set value='781' />

<set value='920' />

<set value='754' />

<set value='840' />

<set value='893' />

<set value='451' />

</dataset>

 

</graph>

       在FusionCharts下新建MSLine.jsp文件,代码如下:

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>FusionCharts Free Documentation</title>

<link rel="stylesheet" href="<%=basePath%>css/Style.css" type="text/css" />

<script language="JavaScript" src="<%=basePath%>js/FusionCharts.js"></script>

</head>

<body>

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

  <tr> 

    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center"> 

        FusionCharts. </div>

      <script type="text/javascript">

  var chart = new FusionCharts("<%=basePath%>FusionCharts/FCF_MSLine.swf", "ChartId", "600", "350");

  chart.setDataURL("<%=basePath%>datas/MSLine.xml");   

  chart.render("chartdiv");

</script> </td>

  </tr>

</table>

</body>

</html>

猜你喜欢

转载自yangyanbo53.iteye.com/blog/2158801