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 Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jquery实现上传图片功能
Jun 29 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
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JavaScript修改css样式style
2008/04/15 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
python求前n个阶乘的和实例
2020/04/02 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
市场营销求职信范文
2014/02/21 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
公司员工活动策划方案
2014/08/20 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
个人四风对照检查材料
2014/09/26 职场文书
新学期主题班会
2015/08/17 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书