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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
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简介
2006/10/09 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP file_exists问题杂谈
2012/05/07 PHP
PHP 文件系统详解
2012/09/13 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
vc6编写python扩展的方法分享
2014/01/17 Python
Python socket模块实现的udp通信功能示例
2019/04/10 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
jupyter 导入csv文件方式
2020/04/21 Python
python如何导入依赖包
2020/07/13 Python
从python读取sql的实例方法
2020/07/21 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
大学生预备党员自我评价分享
2013/11/16 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
社会实践单位意见
2015/06/05 职场文书
张思德观后感
2015/06/09 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers