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


Posted in jQuery onApril 14, 2017

本文实例讲述了jQuery插件FusionCharts绘制2D双折线图效果。分享给大家供大家参考,具体如下:

1、设计思路

(1)根据双折线图的特性和共性,设计出双折线图;

(2)设置数据源XML格式

2、设计步骤

(1)写出双折线引入的图类型和数据源路径

var doubleLine = new FusionCharts( "FusionCharts/MSLine.swf", "doubleLineId", "100%", "540", "0" );
doubleLine.setXMLUrl("doubleLine.xml");
doubleLine.render("doubleLineChart");

(2)设置双折线图的数据源 doubleLine.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2015和2016年某桥一周通过的人数' xAxisName='星期' yAxisName='人数' showValues='0'
    baseFont='微软雅黑' baseFontSize='14' baseFontColor='#FF0000' outCnvBaseFont='宋体'
    outCnvBaseFontSize='20' outCnvBaseFontColor='#00FF00' legendShadow='1'
    legendAllowDrag='1' reverseLegend='1' interactiveLegend='1' legendNumColumns='2'
    minimiseWrappingInLegend='1' showLegend='1' legendPosition='BOTTOM' showZeroPlane='1'>
  <categories>
   <category label='星期一' />
   <category label='星期二' />
   <category label='星期三' />
   <category label='星期四' />
   <category label='星期五' />
   <category label='星期六' />
   <category label='星期日' />
  </categories>
  <dataset seriesName='2015'>
   <set value='656445' />
   <set value='412555'/>
   <set value='956566' />
   <set value='125645' />
   <set value='561124' />
   <set value='265655' />
   <set value='451212' />
  </dataset>
  <dataset seriesName='2016'>
   <set value='154512'/>
   <set value='598655'/>
   <set value='654544'/>
   <set value='956565'/>
   <set value='245454' />
   <set value='965565' />
   <set value='454545' />
  </dataset>
</chart>

(3)引入双折线图

<div id="doubleLineChart"></div>

3、运行结果如下图:

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

4、源码

<!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>FusionCharts 2D双折线图</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
$(function(){
 var doubleLine = new FusionCharts( "FusionCharts/MSLine.swf", "doubleLineId", "100%", "540", "0" );
 doubleLine.setXMLUrl("doubleLine.xml");
 doubleLine.render("doubleLineChart");
});
</script>
</head>
<body>
  <div id="doubleLineChart"></div>
</body>
</html>
jQuery 相关文章推荐
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 #jQuery
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 #jQuery
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 #jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 #jQuery
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
You might like
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
php中如何执行linux命令详解
2018/11/06 PHP
Maps Javascript
2007/01/22 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript 闭包详解
2015/07/02 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
Flask框架单例模式实现方法详解
2019/07/31 Python
Python aiohttp百万并发极限测试实例分析
2019/10/26 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python实现图片转字符画的完整代码
2021/02/21 Python
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
合作意向协议书范本
2014/03/31 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年女职工工作总结
2014/11/27 职场文书
2014年度培训工作总结
2014/11/27 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
Python3的进程和线程你了解吗
2022/03/16 Python
MySQL创建表操作命令分享
2022/03/25 MySQL