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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery实现拖拽小方块效果
Dec 10 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更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
pytorch 常用线性函数详解
2020/01/15 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
Python之多进程与多线程的使用
2021/02/23 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
.NET概念性的面试题
2012/02/29 面试题
军训自我鉴定怎么写
2014/02/13 职场文书
中学生演讲稿
2014/04/26 职场文书
作风建设年活动总结
2014/08/27 职场文书
企业员工辞职信范文
2015/05/12 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python