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 tree增加搜索功能的实现方法
Apr 27 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
JQuery特殊效果和链式调用操作示例
May 13 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery添加div实现消息聊天框
Feb 08 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时间计算相关问题小结
2016/05/09 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python实现划词翻译
2020/04/23 Python
跟老齐学Python之Python文档
2014/10/10 Python
python实现excel读写数据
2021/03/02 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python使用type动态创建类操作示例
2020/02/29 Python
python实现简单文件读写函数
2021/02/25 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
历史系自荐信范文
2013/12/24 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
大学生学习计划书
2014/09/15 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
地方白酒代理协议书
2014/10/25 职场文书
2015法院个人工作总结范文
2015/05/25 职场文书
消费者理赔投诉书
2015/07/02 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python