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和ActionScript的交互实现代码
Aug 01 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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 随机数的深入理解
2013/06/05 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
解决vue+webpack项目接口跨域出现的问题
2020/08/10 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python获取当前时间的方法
2014/01/14 Python
Python实现统计单词出现的个数
2015/05/28 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
django实现用户登陆功能详解
2017/12/11 Python
Python异常处理知识点总结
2019/02/18 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
《桃花心木》教学反思
2014/02/17 职场文书
2014村务公开实施方案
2014/02/25 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
设备收款委托书范本
2014/10/02 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书