`

初始fusionchart

阅读更多

一次工作需要 让我认识了fusionchart  我现在用的版本是fusionchart(V3)

 来看一个使用dataURL方式指定图表数据源的例子:  

<div id="chartdiv" align="center"></div>
<script type="text/javascript">
    
var chart = new FusionCharts("../Charts/FCF_Column2D.swf""ChartId""600""350");
    chart.setDataURL(
"Data/Column2D.xml");
    chart.render(
"chartdiv");
</script>

 

     主要的代码是一段js脚本,首先声明并实例化一个对象FusionChaets,然后使用该对象的setDataURL方法为图表指定一个包含图表数据的xml文件作为数据源,最后使用该对象的render方法在id属性为chartdiv的div元素中生成图表。

    上述对象的构造函数以及两个方法都是在FusionCharts.js文件中进行实现的,所以在包含上述代码的页面中应该首先包含对FusionCharts.js文件的引用。

    当然,这里的Column2D.xml并不是一个随随便便的xml文件,它需要使用特定的标签、属性等,否则,相应的swf文件将不能正常解析并显示图表数据。

    来看一下Column2D.xml的内容:    

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' decimalPrecision='0' formatNumberScale='0'>
    
<set name='Jan' value='462' color='AFD8F8' />
    
<set name='Feb' value='857' color='F6BD0F' />
    
<set name='Mar' value='671' color='8BBA00' />
    
<set name='Apr' value='494' color='FF8E46'/>
    
<set name='May' value='761' color='008E8E'/>
    
<set name='Jun' value='960' color='D64646'/>
    
<set name='Jul' value='629' color='8E468E'/>
    
<set name='Aug' value='622' color='588526'/>
    
<set name='Sep' value='376' color='B3AA00'/>
    
<set name='Oct' value='494' color='008ED6'/>
    
<set name='Nov' value='761' color='9D080D'/>
    
<set name='Dec' value='960' color='A186BE'/>
</graph>

 

     相对来说,这样的xml文件中的内容还是比较容易进行理解的,而且,FusionCharts的文档中提供了关于各种不同图表类型可以接受的xml文件标签、属性等的参考,参见文档中的“Chart XML Reference”部分。

    通过比较不同类型的图表的xml数据格式,可能会发现,除了漏斗图、K线图、甘特图等特殊图表之外,同一类别中常见图表(如单序列图表中的2D柱状图、3D柱状图、2D折线图、2D饼图、3D饼图、2D条形图、2D面积图、2D圆环图)的xml文件格式是类似的,这样在特定应用中,当需要更改图表类型时,我们只需要将js中的FusionCharts对象重新实例化即可,而不需要更改具体的xml数据源。如上述2D柱状图更改为2D条形图时,我们可以使用以下函数:  

<script type="text/javascript">
    
function changeChartTypeToBar()
    
{
        chart 
= new FusionCharts("../Charts/FCF_Bar2D.swf""ChartId""600""350");
        chart.setDataURL(
"Data/Column2D.xml");
        chart.render(
"chartdiv");
    }

</script>

 

     此时,整个页面不必整个刷新,只需要刷新图表区即可。而且,很显然,这是一个比较简单的操作,需要注意:

  • 不同类型的图表的xml数据源可能具有特定的xml标签或属性,所以在需要更改图表类型时,尽量使用在不同图表类型中通用的标签或属性
  • 还是要强调,不同类型图表具有不同的含义,虽然可以方便地在不同图表类型之间进行转换,但是如果图表类型选择错误,很可能带来的是画蛇添足之嫌。如上面的时序数据,如果使用饼图可能就不那么恰当了,虽然将该图表转换为饼图是非常简单的操作

    另外,使用dataURL方式对图表进行指定的数据源,并不要求是一个实际存在的物理xml文件,可以是任何一个返回XML文件或片断的HTTP请求,只有这样,我们才能根据特定的查询条件或过滤表达式方便地从数据库中检索图表所需数据先是在图表上。很显然,这种方式下只能通过POST传递HTTP请求需要的参数,此时,需要注意的是由于FusionCharts对于特殊字符的敏感性,在为FusionCharts对象使用setDataURL指定参数时,该参数字符串中最好不要包含除了英文字符、数字、?、&和-之外的字符,当然,最好使用Javascript中的escape函数对其进行编码。

 

 

分享到:
评论
9 楼 108979979 2009-07-24  
我们项目用到了这个工具
 
我想问一下你们的数据方面怎么做的  使用的setDataURL()还是用的setDataXML()

我用的是setDataURL()  每天需要通过java生成大量xml文件

8 楼 skywen 2009-07-20  
恩 如果需要 我们可以交流
7 楼 vzhchv0010 2009-07-20  
很有关系啊,java web 也需要做报表的撒,我现在就在学这个.
6 楼 skywen 2009-04-17  
当你想做出漂亮的图形时 可以试试
5 楼 apple.shan 2009-04-17  
真的是跟java没关系
4 楼 kebo 2008-12-31  
还狡辩,一点都不严谨
3 楼 skywen 2008-12-31  
你不会用java生成xml 注意点素质
2 楼 skywen 2008-12-31  
有呀 怎么没有 你的思想太低了
1 楼 ray_linn 2008-12-30  
关键字: java 图形? 这和java有屁关系?

相关推荐

    fusionchart的简单封装

    标题“fusionchart的简单封装”涉及的...总的来说,"fusionchart的简单封装"是一个旨在简化FusionCharts使用过程的方法,通过将创建和初始化图表的步骤抽象成一个自定义函数,使得在项目中生成交互式图表变得更加便捷。

    fusionchart支持仪表盘

    首先,"fusionchart支持仪表盘"意味着FusionCharts具备生成仪表盘的能力。仪表盘是一种信息展示工具,它将多个关键性能指标(KPIs)集中在一个统一的视图中,便于用户快速理解业务状况。FusionCharts通过其丰富的...

    fusionchart报表demo

    2. 初始化图表:创建图表对象并设置基本属性,如图表类型、宽度、高度、标题等。 3. 准备数据:将数据以FusionCharts支持的格式(如JSON)组织好。 4. 渲染图表:调用图表对象的render()方法,将数据渲染到指定的...

    FusionChart甘特图控件

    - **js**:JavaScript库文件,其中包含了FusionChart的API和必要的脚本代码,用于处理数据、初始化图表以及处理用户交互。 - **Charts**:可能包含预定义的图表样式和模板,供开发者选择和使用。 **4. 使用与自定义...

    fusionChart中文文档

    4. **初始化图表**:介绍如何创建和初始化图表对象,包括设置图表的ID、宽度、高度、标题、颜色主题等属性。 5. **图表方法**:文档会列出图表对象的方法,如render()用于渲染图表,updateData()用于更新图表数据,...

    FusionChart学习及简单实例1

    3. 创建图表对象:使用`new FusionCharts()`初始化图表,传入配置参数。 4. 渲染图表:调用`render()`方法将图表绑定到指定的HTML元素上。 5. 更新图表:如有需要,可以使用API动态更新图表数据。 总结,...

    FusionChart生成基于flash的动态报表

    2. **初始化图表**:在HTML中添加图表容器,并通过JavaScript代码初始化FusionChart实例,指定图表类型、宽度、高度等属性。 3. **准备数据**:在服务器端生成并返回JSON格式的数据,内容包括图表系列、类别、数据...

    java fusionChart属性封装

    这个方法会包含必要的FusionCharts初始化代码,比如: ```java public String renderChart() { StringBuilder jsCode = new StringBuilder(); jsCode.append("&lt;script type='text/javascript'&gt;") .append("var ...

    FusionChart

    2. **基本用法**:解释如何初始化图表,包括设置图表类型、标题、数据源等基本属性。通常会包含一段HTML和JavaScript代码示例。 3. **数据格式**:FusionCharts接受JSON格式的数据,博客可能会详细讲解如何组织数据...

    一个fusionchart deom

    3. **FusionCharts初始化**:在HTML页面中引入FusionCharts的JavaScript库,然后通过JavaScript代码创建图表实例,指定图表类型、宽度、高度、标题等属性,并提供数据源URL或直接插入JSON数据。 4. **数据绑定**:...

    fusionchart v3. 0参数大全+中文说明+使用手

    6. **开发指南**: 该指南通常包括如何初始化图表、如何加载数据、如何响应用户交互、如何自定义图表样式等关键信息。它还会介绍如何使用API和事件处理来增强图表的功能和交互性。 通过阅读和学习压缩包中的"**...

    fusionChart配合jquery图表

    4. **JavaScript脚本**:包括使用jQuery和FusionCharts库的代码,负责图表的初始化、事件处理和Ajax请求的发送。 5. **配置文件**:如web.xml,可能包含了关于Servlet或Filter的配置,用于处理Ajax请求。 6. **示例...

    fusionChart

    4. **初始化图表**:在JavaScript中,你需要创建一个FusionCharts实例,并传递必要的参数,如图表类型、宽度、高度、数据源等。然后,调用`render()`方法将图表渲染到指定的HTML元素中。 5. **事件处理**:...

    Ext-Fusionchart

    - **配置ExtJS**:在应用程序初始化时,设置ExtJS的基本配置,例如主题、样式表路径等。 - **创建图表组件**:利用FusionCharts XT的JavaScript API,创建一个图表对象,指定图表类型、数据源和配置选项。 - **...

    fusionchart

    7. **API和事件**:FusionCharts提供丰富的API接口,允许开发者控制图表的生命周期,如初始化、更新、销毁等。同时,可以绑定事件监听器,实现用户交互时的动态响应。 8. **性能优化**:对于大数据量的图表,...

    fusionchart demo

    标题"FusionChart Demo"指的是一个使用FusionCharts库创建的示例项目,旨在展示如何在实际应用中利用这个工具来生成交互式图表。FusionCharts是一款JavaScript图表库,能够帮助开发者轻松地在网页上创建各种复杂的...

    fusionchart 小例子 Java+Servlet

    在这个"fusionchart 小例子 Java+Servlet"项目中,我们将探讨如何结合Java后端技术和Servlet来实现FusionCharts的功能。 首先,`Java`是一种广泛使用的后端编程语言,它提供了强大的功能来处理数据和业务逻辑。在这...

    fusionchart封装

    至于文件列表中的"fusionchart",这可能是指包含封装后代码的文件或者示例文件。这些文件可能包括JavaScript文件(如`fusioncharts-wrapper.js`)、HTML文件(用于展示图表的页面)、以及可能的数据文件(如JSON或...

    Fusionchart Free学习笔记

    对应的HTML文件会包含FusionCharts的JavaScript引用和图表初始化代码,以加载SWF文件和XML数据文件。 通过这种方式,FusionCharts使得创建交互式图表变得简单,无论你是开发者还是非开发者,都能够快速构建出吸引人...

    FusionChart 工具类

    本篇文章将详细讲解与"FusionChart 工具类"相关的知识,主要关注`FusionChartUtil.java`和`Dom4jUtil.java`这两个文件。 首先,我们来看`FusionChartUtil.java`。这个类通常包含了与FusionCharts集成所需的各种实用...

Global site tag (gtag.js) - Google Analytics