jQuery.Highcharts.js绘制柱状图饼状图曲线图


Posted in Javascript onMarch 14, 2015

在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来,即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重。Highcharts可以轻松实现三图合一的效果。

var chart;

            $(document).ready(function() {

                chart = new Highcharts.Chart({

                    chart: {

                        renderTo: 'container',

                        defaultSeriesType: 'area'

                    },

                    title: {

                        text: 'Historic and Estimated Worldwide Population Growth by Region'

                    },

                    subtitle: {

                        text: 'Source: Wikipedia.org'

                    },

                    xAxis: {

                        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],

                        tickmarkPlacement: 'on',

                        title: {

                            enabled: false

                        }

                    },

                    yAxis: {

                        title: {

                            text: 'Billions'

                        },

                        labels: {

                            formatter: function() {

                                return this.value / 1000;

                            }

                        }

                    },

                    tooltip: {

                        formatter: function() {

                            return ''+

                                 this.x +': '+ Highcharts.numberFormat(this.y, 0, ',') +' millions';

                        }

                    },

                    plotOptions: {

                        area: {

                            stacking: 'normal',

                            lineColor: '#666666',

                            lineWidth: 1,

                            marker: {

                                lineWidth: 1,

                                lineColor: '#666666'

                            }

                        }

                    },

                    series: [{

                        name: 'Asia',

                        data: [502, 635, 809, 947, 1402, 3634, 5268]

                    }, {

                        name: 'Africa',

                        data: [106, 107, 111, 133, 221, 767, 1766]

                    }, {

                        name: 'Europe',

                        data: [163, 203, 276, 408, 547, 729, 628]

                    }, {

                        name: 'America',

                        data: [18, 31, 54, 156, 339, 818, 1201]

                    }, {

                        name: 'Oceania',

                        data: [2, 2, 2, 6, 13, 30, 46]

                    }]

                });

            });

以上就是本文所述的全部内容了,希望对大家使用jQuery绘制柱状图饼状图曲线图能够有所帮助

Javascript 相关文章推荐
JS打开新窗口的2种方式
Apr 18 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
layui选项卡效果实现代码
May 19 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
JavaScript对象字面量和构造函数原理与用法详解
Apr 18 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 #Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 #Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 #Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 #Javascript
javascript实现数独解法
Mar 14 #Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 #Javascript
纯javascript实现简单下拉刷新功能
Mar 13 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
php导出excel格式数据问题
2014/03/11 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php实现zip文件解压操作
2015/11/03 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
JavaScript学习笔记之数组基本操作示例
2019/01/09 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python如何更新包
2020/06/11 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
StringBuilder和String的区别
2015/05/18 面试题
作文评语怎么写
2014/12/25 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL