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 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
Vue全局分页组件的实现代码
Aug 10 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
vue全局使用axios的操作
Sep 08 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
php 分页类 扩展代码
2009/06/11 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
19个Android常用工具类汇总
2014/12/30 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python机器学习之神经网络实现
2018/10/13 Python
python 同时运行多个程序的实例
2019/01/07 Python
python贪吃蛇游戏代码
2020/04/18 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
厨师岗位职责
2013/11/12 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
个人委托书如何写
2014/09/25 职场文书
授权委托书样本
2014/09/25 职场文书
实习单位鉴定意见
2015/06/04 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
matlab xlabel位置的设置方式
2021/05/21 Python