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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jQuery实现开关灯效果
Aug 02 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
PHP页面中文乱码分析
2013/10/29 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
Mac下安装vue
2018/04/11 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
Vue实现简易计算器
2020/02/25 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
利用python实现微信头像加红色数字功能
2018/03/26 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python数据集切分实例
2018/12/08 Python
自学python的建议和周期预算
2019/01/30 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
通过代码实例了解Python异常本质
2020/09/16 Python
小结Python的反射机制
2020/09/28 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
自荐书范文范例
2014/02/13 职场文书
国庆宣传标语
2014/06/30 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
创先争优个人总结
2015/03/04 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
JavaScript文档对象模型DOM
2021/11/20 Javascript
Java获取字符串编码格式实现思路
2022/09/23 Java/Android