`
hyj0903
  • 浏览: 150845 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

在struts2中使用jquery FusionCharts来生成图表

阅读更多

一、整合思路

 

1、利用struts2+freemarker生成xml

2、FusionCharts读取xml文件,并生成相应的图表

 

二、核心代码:

  test.jsp

<script type="text/javascript" src="FusionCharts.js"></script>
<div id="chartdiv1" align="center">FusionCharts. </div>
<script type="text/javascript">
    var chart = new FusionCharts("MSColumn3D.swf", "ChartId1", "700", "500", "0", "0");
    chart.setDataURL("statisticData.xml");		   
    chart.render("chartdiv1");
</script>

 

 statisticData.xml

  <?xml version="1.0" encoding="gb2312" ?> 
- <chart id="ChartId1" caption="网站相关统计结果" shownames="1" showvalues="1" decimals="0" formatNumberScale="0" baseFont="Tahama" baseFontSize="12">
- <categories>
  <category label="栏目" /> 
  <category label="产品" /> 
  <category label="产品视频" /> 
  <category label="产品图片" /> 
  <category label="文章" /> 
  <category label="留言" /> 
  <category label="订单" /> 
  <category label="未处理订单" /> 
  <category label="友情链接" /> 
  <category label="上传文件" /> 
  <category label="用户" /> 
  </categories>
- <dataset seriesName="计数">
  <set value="16" /> 
  <set value="3" /> 
  <set value="5" /> 
  <set value="3" /> 
  <set value="15" /> 
  <set value="7" /> 
  <set value="3" /> 
  <set value="2" /> 
  <set value="6" /> 
  <set value="3" /> 
  <set value="4" /> 
  </dataset>
  </chart>

 

  struts2.xml

 

<action name="adminWelcome" class="org.darkness.freemarker.action.AdminWelcome">
	<result name="success"  type="redirect">/admin/fusionchart/test.jsp</result>
</action>

 

 三、调试中遇到的问题

 

  1、invalid xml data

         这个是编码总是,一定要统一编码,比如都用gb2312。特别注意xml编码方式和生成xml文件方法中的编码方式要统一。

 

  2、js错误提示:‘FusionCharts’未定义!!!

    这个错误好奇怪啊,

    我的后台是iframe打的框架,在struts2.xml中采如果不加type="redirect"这个属性,就会产生这个错误,加上就没有。具体如何,还太清楚。

 

四、效果如下

 

  

 

 

  • 大小: 40.4 KB
分享到:
评论

相关推荐

    利用FusionCharts 实现数据图表展示

    - **响应式设计**:确保图表在不同屏幕尺寸和设备上都能正确显示,可能需要调整图表大小和布局。 - **图表交互**:利用FusionCharts的事件处理机制,增加图表的互动性,如点击图表区域查看详细信息。 - **性能优化...

    fusioncharts生成图表后导出图片

    在博文链接中(由于无法直接访问该链接,以下内容基于FusionCharts常见功能推测)可能讲解了如何使用FusionCharts的API和方法来生成图表,并介绍如何实现图表的导出功能。FusionCharts支持导出为多种格式的图片,如...

    fusionCharts是如何在网页呈现图表

    FusionCharts需要数据来生成图表,数据可以以XML或JSON格式提供。这些数据文件包含了图表的各个系列、标签、值等信息。数据可以静态编写,也可以通过服务器端脚本动态生成,如连接到数据库或实时数据源。例如,在...

    FusionCharts+asp.net+sqlserver生成图表

    在这个实例中,我们将深入探讨如何利用FusionCharts与asp.net和SQL Server相结合,来从数据库中获取数据并生成图表。 首先,`FusionCharts` 是一个基于JavaScript的图表解决方案,提供了超过90种不同类型的图表,...

    FusionCharts图表组件简单使用

    此外,不同类型的图表可能需要不同的数据源格式,因此在实际应用中,建议参考FusionCharts提供的文档和示例来适应具体需求。 总的来说,FusionCharts是一个强大且易于使用的图表组件,适用于快速构建具有吸引力的...

    fusioncharts asp.net 图表控件示例

    2. **在ASP.NET中使用FusionCharts** 在ASP.NET项目中集成FusionCharts,首先需要下载并安装FusionCharts .NET Suite,该组件提供了对ASP.NET的直接支持。安装后,可以通过引用FusionCharts的DLL文件在代码中使用。...

    用fusioncharts使用json格式数据展示图表

    3. **创建图表对象**:在JavaScript代码中,实例化FusionCharts对象,传入图表类型和JSON数据。 ```javascript var chartObj = new FusionCharts({ type: 'column2d', renderAt: 'chart-container', width: '600...

    fusioncharts图表

    开发者可以参考这些资源来快速上手和深入了解FusionCharts的使用方法。例如,示例代码可能展示了如何创建不同类型的图表,以及如何自定义图表的样式和行为。通过研究和实践,Web开发者可以充分利用FusionCharts的...

    FusionCharts动态图表实现代码

    2. **准备数据**:FusionCharts的数据可以通过XML、JSON或者直接在JavaScript中定义。在初学者的示例中,可能采用最简单的JavaScript对象数组形式,如: ```javascript var data = { "chart": { "caption": "月...

    Java 实现 FusionCharts 图表导出图片或PDF文件功能实例源码

    在Java开发中,FusionCharts是一款强大的图表库,它提供了丰富的图表类型以及高度自定义的能力,使得开发者可以轻松创建交互式、美观的数据可视化效果。本文将深入探讨如何使用Java实现FusionCharts图表的导出功能,...

    FusionCharts图表制作插件

    在Java和JavaScript环境中使用FusionCharts,开发者可以通过以下步骤进行操作: 1. **安装和引入库**:首先需要在项目中引入FusionCharts的JavaScript库,通常通过CDN链接或本地文件引用。 2. **准备数据**:数据...

    FusionCharts v3图表 例题

    在这个" FusionCharts v3图表 例题"中,我们将会深入探讨其核心功能和使用方法。 首先,让我们了解FusionCharts的基本架构。FusionCharts由两部分组成:服务器端代码(用于处理数据和生成XML/JSON数据源)和客户端...

    jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】

    在本示例中,我们将深入探讨如何使用jQuery插件FusionCharts来实现2D面积图效果。FusionCharts是一款强大的图表库,它提供了多种图表类型,包括2D面积图,用于展示数据随时间变化的趋势。这里我们将分析创建2D面积图...

    jquery 多类型统计图表

    在实际应用中,开发者需要了解如何使用jQuery和FusionCharts的API来创建和定制这些图表。这包括但不限于设置数据源、选择图表类型、配置图表属性、添加交互事件等。同时,为了优化性能和用户体验,还需要考虑如何...

    FusionCharts使用源码例C#

    FusionCharts是一款强大的JavaScript...在C# ASP.NET项目中,你可以将这些库包含到你的页面头部,或者使用脚本管理器(如ScriptManager)来动态加载。例如,在一个`.aspx`页面中,可以在`&lt;head&gt;`标签内添加: ```html ...

    Fusioncharts 图表

    除了上述图表类型,FusionCharts还提供了多种复杂图表,如热力图、瀑布图、甘特图等,这些图表在商业智能、项目管理等领域有着广泛的应用。例如,甘特图可以清晰地展示任务的进度和依赖关系,热力图则能突出显示数据...

    js实现图表-FusionCharts

    4. **JSP**:在Java环境中,JSP开发者可以通过FusionCharts的Java类库,结合Servlet或JSP页面来生成图表数据。 **三、图表类型及特性** 1. **多样化图表**:FusionCharts支持20+种不同类型的图表,满足各种数据分析...

    java生成FLASH图表

    在Java中生成Flash图表,通常会使用特定的库或框架,例如FusionCharts。FusionCharts是一个流行的图表库,它提供了Java API,使得开发者可以直接在Java环境中生成复杂的Flash图表。它支持多种图表类型,如柱状图、...

    FusionCharts Free(图表flash控件)很好用,有教程和dll

    FusionCharts Free(图表flash控件)很好用,有教程和dll.

Global site tag (gtag.js) - Google Analytics