`
ijavagos
  • 浏览: 1241502 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

FusionCharts 使用手记

JSPXMLJavaScriptHTML浏览器 
阅读更多

从 http://www.infosoftglobal.com/ 站点下载免费版本到本地，解压到本地，取出 JSClass目录和Charts 目录下所有文件拷贝到你的网站chart目录下，即可开始FusionCharts的使用之旅。

一、 开始一个简单的demo

1. 在你的网站根目录下新建 Data.xml文档，作为图表的数据源，内容如下：

<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' 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>

2. 再建立一个展示页面，Demo.html ：

<html>

<head>

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

<title>第一个Flash图表页面</title>

<!-- 引入FusionCharts 需要的JS脚本文件 -->

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

</head>

<body>

<div id="chartDiv" align="center">First Chart Container Pie 3D</div>

<script type="text/javascript">

var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");

myChart1.setDataURL("Data.xml");

myChart1.render("chartDiv");

</script>

</body>

</html>

3. 猛击 Demo.html 文件，即可看到如下效果：




4. 够简单吧，这样才好。

二、 对中文字符的支持

1. 让 FusionCharts支持中文
修改一下刚才 Data.xml 文件，加入几个中文字符，狂刷新浏览器，会看到几个不协调的字符。这里我修改图表标题(caption='Monthly Unit Sales' è caption='月销售历史')：



FusionCharts告诉我们XML文件加载失败，可能有非法字符。下面要修改Data.xml，使之好好工作。官方说当前Data.xml文件缺乏BOM标记（Byte Order Mark），打开UltraEdit 文本编辑器，另存为的时候，一定要选择：




UTF-8编码方式(已经附加BOM标记)，直接覆盖原文件。

再次刷新Demo.html 页面，即可看到标题变成了中文：



若您对16进制熟悉，以16进制打开文件，直接修改前6位字符为

”EF BB BF”,保存成UTF-8格式即可。

牢记：静态的XML文件，须包含BOM特征码。

2. 让动态产生的XML文件避免中文问题

我们实验一下把Data.xml文件替换成动态生成XML方式。

新建一个JSP 页面：Data.jsp ,输入以下内容：

<%@ page language="java" contentType="text/xml; charset=UTF-8"%>

<%

String xmlStr = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' 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>";

out.write(xmlStr);

%>

在Demo.html页面，修改 setDataURL参数为“Data.jsp”，再次刷新Demo.html页面，即可看到效果。

下面在JSP页面中同样把图表标题修改成中文，刷新浏览器，会看到“Invalid XML Data”字样。

怎么办，设置JSP文件具有BOM标记，不行！设置其XML输出编码尝试一下吧：

<%@ page language="java" contentType="text/xml; charset=GBK"%>

看到了吗，UTF-8 被修改成了 GBK编码，刷新Demo.html文件，看一看到正常效果了。

牢记 ：动态产生的XML文档，编码须是GBK或者gb2312。

三、 表格数据源-字符串形式加载

以上使用FusionCharts 提供的 setDataURL方法，参数须是可访问、产生xml文档的URL地址。若不是url，字符串亦可作为参数传递过去：

新建Demo2.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

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

<title>使用字符串充当数据源</title>

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

</head>

<body>

<div id="chartDiv" align="center"> Chart Container Pie 3D</div>

<script type="text/javascript">

//数据源

var xmlData = "<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' 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>";

var myChart1 = new FusionCharts("chart/FCF_Column3D.swf", "myChartId", "600", "350");

myChart1.setDataXML(xmlData);

myChart1.render("chartDiv");

</script>

</body>

</html>

访问Demo2.html页面，会看到正常的图标显示。

尝试一下将图表标题修改成中文，这次很顺利的显示出来了，但标题显示为乱码:


怎么办 ？把当前的html文件修改成包含有BOM特征码的UTF-8文件，这招不好使了。

解决方法，建立一个JSP页面（Demo2.jsp），比Demo2.html文件多了一行内容:

<%@ page language="java" contentType="text/html; charset=UTF-8"%>

访问一下，可以看到中午乱码问题解决了。

牢记 ：提供字符串数据源的页面必须硬编码才行，可以是GBK或UTF-8。

再深入一下，动态产生的字符串数据源，是否也存在乱码问题。

修改Demo2.jsp中的

myChart1.setDataXML("<jsp:include page= 'Data2.jsp' />");</sp>

分享到：
| Tomcat 6.0 开发配置小结
评论
发表评论

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

相关推荐

    fusionCharts完美破解版

    包含FusionCharts使用手记 官方Demo 中文开发指南 解决中文乱码Demo Area2D.swf Bar2D.swf Bubble.swf Column2D.swf Column3D.swf Doughnut2d.swf Doughnut3D.swf FCExporter.swf Funnel.swf InverseMSArea.swf ...

    FusionCharts使用源码例C#

    在C#开发环境中，FusionCharts可以与ASP.NET、WinForms或其他.NET框架结合使用，为应用程序添加美观的数据呈现功能。本示例主要关注如何在C#项目中集成并使用FusionCharts。 首先，要使用FusionCharts，你需要在你...

    FusionCharts 使用实例

    标题"FusionCharts使用实例"指的是使用FusionCharts这个JavaScript图表库来创建动态、交互式的图表。FusionCharts是一个广泛使用的工具，它允许开发者通过简单的API和丰富的图表类型将复杂的数据可视化，适用于各种...

    FusionCharts V3使用文档.pdf

    FusionCharts V3使用文档.pdf

    FusionCharts free使用手册

    **FusionCharts免费使用手册** FusionCharts是一款强大的JavaScript图表库，它允许开发者轻松地在网页上创建交互式、丰富多彩的图表。这份免费使用手册将深入介绍如何利用FusionCharts来构建各种图表，以增强数据...

    FusionCharts 使用文档

    在Java Web工程中使用FusionCharts，首先需要将所有Flash文件（通常在下载包的Charts目录下）复制到WebRoot目录，这些文件是生成图表的模板。接着，将`FusionCharts.jsp`文件（在Includes包中）放入WebRoot或其子...

    fusioncharts使用范例.

    在本示例中，我们将探讨如何使用FusionCharts来创建一个饼状图。 首先，从提供的代码片段可以看到，创建FusionCharts图表的基本步骤如下： 1. **引入JavaScript库**： 在HTML文件的`&lt;head&gt;`部分，通过`&lt;script&gt;`...

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

    **使用FusionCharts展示JSON数据步骤** 1. **引入FusionCharts库**：首先，我们需要在HTML文件中引入FusionCharts的JavaScript库。这可以通过添加`&lt;script&gt;`标签来实现，确保链接到正确的FusionCharts库文件。 2. ...

    FusionCharts图表组件简单使用

    使用FusionCharts非常简单，主要涉及以下几个步骤： 1. **数据源准备**：首先，你需要一个数据源，通常是XML文件。例如，`data.xml`包含了 Monthly Sales Summary 的数据，每个`set`标签代表一个月的销售数据，包含...

    fusioncharts的使用和实例

    **融合图表（FusionCharts）使用与实例** FusionCharts是一款强大的JavaScript图表库，它能够帮助开发者轻松地在网页上创建交互式、丰富的数据可视化效果。这个库支持超过90种图表类型，包括柱状图、饼图、线图、...

    FusionCharts

    FusionCharts是一款强大的数据可视化工具，专为生成各种报表而设计。它以其便捷性、高效性和灵活性著称，使得...通过学习和掌握FusionCharts的使用，你将能更好地理解和传达复杂的数据信息，为企业决策提供有力的支持。

    FusionCharts 下钻和单击图上某个节点调用js函数

    为了更好地利用这些特性，你需要了解FusionCharts的API，包括如何配置图表对象、设置数据源、以及如何定义和使用JavaScript事件处理函数。在实际项目中，这些功能可以帮助你构建交互性强、用户体验良好的数据可视化...

    最全的fusioncharts 的swf文件

    FusionCharts是一款强大的数据可视化工具，它通过交互式的图表来展示复杂的数据。在这个最全的FusionCharts SWF文件集合中，我们找到了一系列用于不同类型的图表展示的Flash文件。SWF是Adobe Flash Player支持的文件...

    FusionCharts在Android上的实现

    例如，你可以使用`&lt;script&gt;`标签来引用FusionCharts的JavaScript库，并在其中定义`FusionCharts`对象实例。 3. **加载HTML到WebView**： - 使用WebView的`loadDataWithBaseURL()`或`loadUrl()`方法加载HTML内容。...

    fusionCharts

    FusionCharts是一款强大的数据可视化工具，专为创建交互式、丰富多彩的...这些文件为我们提供了学习和使用FusionCharts的资源，通过深入研究这些内容，开发者可以更好地理解和掌握FusionCharts的使用方法和高级特性。

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