FusionCharts 使用手记

于 2013-12-17 22:09:40 发布
阅读量235 收藏
点赞数
分类专栏： j2ee 相关

从 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>

gyq132104
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
FusionCharts free使用手册
04-07
fusioncharts使用范例.
02-24
fusioncharts使用范例
FusionCharts使用手册
09-21
FusionCharts是InfoSoft Global公司的一个产品，InfoSoft Global 公司是专业的Flash图形方案提供商，他们还有几款其他的，基于Flash技术的产品，都非常的漂亮。FusionCharts Free则是FusionCharts提供的一个免费版本...
FusionCharts使用指南
08-06
FusionCharts是一个很好的图形展现工具，希望对能用到的朋友有所帮助。
机械设计试验机sw20可编辑非常好的设计图纸100%好用.zip
05-02
机械设计试验机sw20可编辑非常好的设计图纸100%好用.zip
JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文).zip
05-02
JSP基于WEB的图书馆借阅系统的设计与实现(源代码+论文)
1_6_huh猫（扭曲声音）_分p整合猫meme素材90+（持续更新中）.mp4
05-02
1_6_huh猫（扭曲声音）_分p整合猫meme素材90+（持续更新中）.mp4
【超炫购物模板】仿拍鞋网商城首页触屏版html5手机wap购物网站模板下载.zip
05-02
【超炫购物模板】仿拍鞋网商城首页触屏版html5手机wap购物网站模板下载.zip
国内外顶尖信用评级方法+18个行业信用评级指标体系+穆迪评级方法
05-02
国内外顶尖评级方法 中诚信评级方法汇总 18个行业评级指标体系文档 募集+法律意 见书+评级报告案例 穆迪评级方法 某公司债券募集说明书及评级报告-经典案例 国 内外顶尖评级方法.part2.rar (13.32 MB)
Unity3D版本游戏源码2-119美食游戏模板-Restaurant&CookingStarterKit1.72
05-02
Unity3D版本游戏源码2-119美食游戏模板—Restaurant & Cooking Starter Kit 1.72提取方式是百度网盘分享地址
LNMP部署wordpress
05-02
LNMP部署wordpress
node-v11.9.0-linux-x64.tar.xz
最新发布
05-02
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
论文复刻中国式融资融券与企业金融化-双重差分模型(Stata代码附数据)PSM+DID
05-02
●论文复刻● 中国式融资融券与企业金融化 ——基于分批扩容的准自然实验 通过本案 例可以学习到什么 从基础数据整理到最后的结果输出的完整案例 基础结果：描述性统计 、相关系数矩阵、双重差分回归、绘制走势图 如何对缺失值和异常值处理（缩尾处理） 输出表格结果 组间差异检验 动态平行趋势检验 稳健性检验方法 倾向得分匹配PSM 替换被解释变量 控制省份固定效应 改变计量方法，采用个体和时间上的双重聚类调整 剔除IPO当年的样本 企业金融化的动机（套利动机、股价崩盘） 进一步研究（考察 管理层持股和机构投资者持股的差异、考察产品市场竞争的差异、考察股票市场行情的差异 ） 学习到论文实证分析中常用的命令（merge、logout、esttab、ps match2、cluster2、coefplot、ttest、ranksum等） 内容丰富，绝对超值，建议先下载文献看看，有需要可以下载系统学习，其他相关主题的 论文可速成 模型说明 变量定义 变量符号 定义与度量方式 Fin 企业金融化，金 融资产/总资产 Post List 虚拟变量，公司股票成为融资融券标的以后年度的 样本取值为1；否
地产界面模版.zip
05-02
触屏版html5响应式手机app网站模板下载 触屏版html5响应式手机，自适应手机wap
VOC2-1-2-2-2-2-2
05-02
VOC2-1-2-2-2-2-2
从头开始训练SSD-python源码.zip
05-02
从头开始训练SSD-python源码.zip
基于faster-rcnn实现的行人检测算法python源码+项目说明+详细注释.zip
05-02
基于faster-rcnn实现的行人检测算法python源码+项目说明+详细注释.zip 使用方法： 1.编译安装faster-rcnn的python接口，代码在：https://github.com/rbgirshick/py 2.下载训练好的caffe模型，百度云链接为：https://pan.baidu.com/s/1w479QUUAwLBS2AJbc-eXIA，将下载的模型文件放到faster-rcnn文件夹的data/faster_rcnn_models文件夹中 3.将本项目中的文件夹替换安装好的faster-rcnn源码中的文件夹 4.使用tools文件夹下的测试脚本运行demo：python person_detect.py
基于Torch Hub的yolo5和ssd推理-python源码.zip
05-02
基于Torch Hub的yolo5和ssd推理-python源码.zip
FusionCharts使用详解+实例+图解+Demo
07-27
FusionCharts是一个强大的数据可视化库，可以帮助开发人员创建漂亮而交互式的图表和图形。下面是一个关于如何使用FusionCharts的详细说明，包括实例、图解和Demo。 1. 安装FusionCharts：首先，你需要从FusionCharts官方网站下载和安装FusionCharts库。你可以选择下载免费版本或购买商业许可证。 2. 引入FusionCharts库：将FusionCharts的JavaScript文件引入你的HTML文件中。你可以通过将以下代码添加到`<head>`标签中来实现： ```html <script src="fusioncharts.js"></script> ``` 3. 创建一个容器：在HTML文件中创建一个用于显示图表的容器。你可以使用一个`<div>`标签，并为其指定一个唯一的ID。例如： ```html <div id="chartContainer"></div> ``` 4. 准备数据：准备用于绘制图表的数据。你可以使用JavaScript对象或从服务器获取的JSON数据。 5. 创建图表对象：使用FusionCharts提供的API创建一个图表对象。你需要指定图表类型、数据和容器ID。例如，下面的代码创建了一个柱状图： ```javascript var chart = new FusionCharts({ type: 'column2d', renderAt: 'chartContainer', dataSource: { data: [ { label: 'January', value: '100' }, { label: 'February', value: '200' }, { label: 'March', value: '150' } ] } }); ``` 6. 渲染图表：调用图表对象的`render()`方法，将图表渲染到指定的容器中。例如： ```javascript chart.render(); ``` 7. 自定义图表：你可以使用FusionCharts提供的各种配置选项来自定义图表的外观和行为。例如，你可以更改图表的颜色、字体、标题等。你可以参考FusionCharts的文档以获取更多自定义选项。 8. 实例和图解：根据你的具体需求，可以参考FusionCharts的官方文档和示例来学习更多关于使用FusionCharts的实例和图解。 9. Demo：你可以在FusionCharts的官方网站上找到各种示例和演示，以帮助你更好地理解和使用FusionCharts。你可以尝试运行这些Demo，并从中获取灵感和指导。 希望这个详细说明对你有所帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值