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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
Jquery Fade用法详解
Nov 06 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP中的日期加减方法示例
2014/08/21 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Python实现测试磁盘性能的方法
2015/03/12 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python如何在bool函数中取值
2020/09/21 Python
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
Java基础面试题
2012/11/02 面试题
化学专业毕业生自荐信
2013/11/15 职场文书
班主任工作年限证明
2014/01/12 职场文书
硕士生找工作求职信
2014/07/05 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
共青团员自我评价
2015/03/10 职场文书
大国崛起观后感
2015/06/02 职场文书
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技