`
yangyanbo53
  • 浏览: 732 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

fusioncharts多折线图

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>

 

 

 

 

 

  • 大小: 13.9 KB
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    FusionCharts 绘制折线图、矩形图、雷达图,导出图片

    【注意】只适合C#。 资源包中包含一个现成的实例； 最新FusionCharts.dll; FusionCharts.js； 多种.SWF文件。 可绘制折线图、矩形图 、雷达图及其他多种图片,导出图片。

    flash xml fusioncharts网页波动折线图走势

    标题中的“flash xml fusioncharts网页波动折线图走势”指的是使用FusionCharts库在网页上创建的一种动态数据可视化工具，具体表现为波动的折线图。FusionCharts是一款基于Flash技术的图表库，它通过XML数据源来渲染...

    多Y轴折线图

    下面将详细探讨如何在JSP页面上实现多Y轴折线图，以及使用FusionCharts库进行此操作的相关知识点。 首先，我们需要了解JSP（JavaServer Pages）是Java的一种动态网页技术，它允许开发者在HTML页面中嵌入Java代码，...

    Fusioncharts XML参数说明

    本篇文章将基于提供的部分XML配置参数进行详细解析，帮助读者更好地理解如何通过XML来定制不同的图表类型，如单柱图、折线图、饼图、堆栈图等。 #### 二、通用参数 ##### 1. **caption** - **定义**: 图表标题。 ...

    FunsionCharts折线图的实现

    在这个主题中，我们将深入探讨如何实现FusionCharts折线图，这将有助于你展示时间序列数据、趋势分析和其他基于数值的变化情况。 首先，我们需要了解FusionCharts的基本概念。FusionCharts是一个用纯JavaScript编写...

    FusionCharts画示例图

    FusionCharts 提供了多种图表类型的示例，包括柱状图、折线图、饼图、地图等。这些示例展示了如何配置不同类型的图表，以及如何添加交互功能，如点击事件、工具提示等。例如： 1. 柱状图：展示分类数据，适用于比较...

    FusionChartsFree,饼状图,折线图等制作.例子

    FusionCharts Free的折线图支持多系列、动态动画、轴刻度自定义等功能，可以清晰地呈现出数据的变化过程和趋势。 在压缩包中，可能包含以下内容： 1. `详细文档.doc`：这是一个Microsoft Word文档，详细介绍了...

    functioncharts与extjs结合，做多折线图

    标题中的"functioncharts与extjs结合，做多折线图"指的是使用FunctionCharts库和ExtJS框架协同工作，创建一个可以展示多个折线图的交互式图表应用。FunctionCharts是一款强大的图表绘制库，它提供了丰富的图表类型，...

    jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

    本文实例讲述了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果。分享给大家供大家参考，具体如下： 1、设计思路 （1）了解组合图的特性以及用法，选用图的类型； （2）设计出两根柱子和两根折线，分开展示...

    Fusioncharts 图表

    FusionCharts支持多种图表类型，包括但不限于柱状图、折线图、饼图，以及更复杂的散点图、仪表盘和地图等，能够满足用户在不同场景下的数据展示需求。 柱状图是FusionCharts中最基础的图表类型之一，适用于对比不同...

    Asp生成统计折线图

    在ASP(Active Server Pages)开发中，生成统计折线图是一项常见的需求，特别是在数据分析和可视化领域。折线图能够清晰地展示数据随时间变化的趋势，是网页应用中用于展示历史数据、预测趋势或比较不同系列数据的有效...

    jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】

    主要介绍了jQuery插件FusionCharts绘制2D双折线图效果,结合实例形式分析了jQuery使用FusionCharts结合xml数据载入实现2D双折线图绘制的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

    asp生成折线图源码

    在ASP中生成折线图，我们需要借助一些图表库或组件，例如JScript Chart、FusionCharts、WebChart等。这些组件提供了丰富的API和样式设置，可以帮助我们根据数据生成各种类型的图表，包括折线图。下面我们将详细介绍...

    fusioncharts效果图

    5. **组合图（只有Y轴）**：这种图表结合了两种或更多种不同的图表类型（如柱状图和折线图），但共享同一个Y轴。这有助于在同一图表中对比不同类型的指标，使得分析更为直观。 6. **组合图（两条Y轴）**：这种高级...

    JS画图,柱状图,饼图,折线图,例子代码

    Chart.js、Plotly.js或 FusionCharts 都支持折线图的绘制。创建折线图时，我们需要定义X轴的时间序列和Y轴的数值，然后用点连接这些点以形成线条。同样，添加轴标签、网格线和动态工具提示能提升用户体验。 在实现...

    FusionCharts 图形报表展示

    1. **图表类型**：FusionCharts支持多种图表类型，包括折线图、柱状图、饼图、散点图、热力图、甘特图等，满足不同数据展示需求。 2. **数据格式**：数据可以以XML、JSON或纯JavaScript数组的形式提供，方便与后端...

    FusionCharts 各类统计图制作

    - 区域图：在折线图的基础上填充区域，突出显示范围或区间。 - 甘特图：用于项目管理，展示任务的进度和时间线。 3. **FusionCharts属性** - `chartId`：图表容器的ID，决定了图表在HTML页面上的位置。 - `...

    fusioncharts实例

    在"fusioncharts实例"这个压缩包中，包含了FusionCharts 3.2版本的SWF破解文件，以及一系列示例，包括单折线图、3D饼状图、多折线图和散点图。这些实例对于学习和理解FusionCharts的功能和用法至关重要。 首先，...

Magicbox
Global site tag (gtag.js) - Google Analytics