欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

fusioncharts多折线图

程序员文章站 2022-06-04 11:19:05
...

       在项目目录下,新建文件夹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>

 

 

 

 

 

  • fusioncharts多折线图
            
    
    博客分类: fusioncharts fusioncharts 
  • 大小: 13.9 KB
相关标签: fusioncharts