jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】


Posted in jQuery onApril 10, 2017

本文实例讲述了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果。分享给大家供大家参考,具体如下:

1、设计思路

(1)了解组合图的特性以及用法,选用图的类型;

(2)设计出两根柱子和两根折线,分开展示。

2、设计步骤

(1)设计页面 index.html:

<!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>FuionCharts 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 column2DLine = new FusionCharts( "FusionCharts/MSCombi2D.swf", "doubleAreaId", "100%", "540", "0" );
 column2DLine.setXMLUrl("columnLine.xml");
 column2DLine.render("columnLine");
});
</script>
</head>
<body>
  <div id="columnLine"></div>
</body>
</html>

(2)设计出数据源 columnLine.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2013-2016年某人年收入详细' xAxisName='月份' yAxisName='收入' showValues='0'
    baseFont='微软雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋体'
    outCnvBaseFontSize='20' outCnvBaseFontColor='#0000FF'>
  <categories>
   <category label='一月' />
   <category label='二月' />
   <category label='三月' />
   <category label='四月' />
   <category label='五月' />
   <category label='六月' />
   <category label='七月' />
   <category label='八月' />
   <category label='九月' />
   <category label='十月' />
   <category label='十一月' />
   <category label='十二月' />
  </categories>
  <dataset seriesName='2013'>
   <set value='59845' />
   <set value='36562'/>
   <set value='15421' />
   <set value='56213' />
   <set value='45121' />
   <set value='56232' />
   <set value='56121' />
   <set value='23565' />
   <set value='85656' />
   <set value='45421' />
   <set value='23561' />
   <set value='24801' />
  </dataset>
  <dataset seriesName='2014' renderAs='Line'>
   <set value='56122' />
   <set value='65121'/>
   <set value='45154' />
   <set value='20120' />
   <set value='95656' />
   <set value='46522' />
   <set value='65323' />
   <set value='62311' />
   <set value='95656' />
   <set value='65322' />
   <set value='74545' />
   <set value='56231' />
  </dataset>
  <dataset seriesName='2015'>
   <set value='95656' />
   <set value='54132'/>
   <set value='45511' />
   <set value='23200' />
   <set value='65622' />
   <set value='32600' />
   <set value='54512' />
   <set value='56232' />
   <set value='26562' />
   <set value='45421' />
   <set value='52211' />
   <set value='65623' />
  </dataset>
  <dataset seriesName='2016' renderAs='Line'>
   <set value='56444'/>
   <set value='65232'/>
   <set value='12123'/>
   <set value='21222'/>
   <set value='78454' />
   <set value='56211' />
   <set value='42422' />
   <set value='95655' />
   <set value='45455' />
   <set value='95656' />
   <set value='22900' />
   <set value='41512' />
  </dataset>
</chart>

3、设计结果

jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
You might like
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
php函数与传递参数实例分析
2014/11/15 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
Laravel中任务调度console使用方法小结
2017/05/07 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python队列queue模块详解
2018/04/27 Python
python内存动态分配过程详解
2019/07/15 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
五十岁生日宴会答谢词
2014/01/15 职场文书
国际会议邀请函范文
2014/01/16 职场文书
大学毕业感言一句话
2014/02/06 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
绿色小区申报材料
2014/08/22 职场文书
个人授权委托书格式
2014/08/30 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
初一语文教学反思
2016/03/03 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
解决numpy和torch数据类型转化的问题
2021/05/23 Python