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的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
如何使用Jquery动态生成二级选项列表
Feb 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
PHP中PDO基础教程 入门级
2011/09/04 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
php给数组赋值的实例方法
2019/09/26 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
移动端js触摸事件详解
2016/09/18 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
五种Python转义表示法
2020/11/27 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
资深生产主管自我评价
2013/09/22 职场文书
高三英语教学反思
2014/01/13 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
房展策划方案
2014/06/07 职场文书
员工离职证明范本
2015/06/12 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python