jQuery.Highcharts.js绘制柱状图饼状图曲线图
更新时间：2015年03月14日 11:06:52 投稿：hebedich
这篇文章主要介绍了jQuery.Highcharts.js绘制柱状图饼状图曲线图的方法，非常的实用，小伙伴们可以直接拿到项目中使用。
在数据统计和分析业务中，有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。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绘制柱状图饼状图曲线图能够有所帮助
相关文章
Jquery中offset()和position()的区别分析
这篇文章主要介绍了Jquery中offset()和position()的区别,实例分析了offset()与position()的使用的技巧与区别,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jquery实现的简单二级菜单效果代码,通过简单的jQuery控制鼠标事件及链式操作实现二级菜单切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
JQuery日历插件My97DatePicker日期范围限制
这篇文章主要介绍了JQuery日历插件My97DatePicker日期范围限制的相关资料,需要的朋友可以参考下2016-01-01
本篇文章主要是对jquery选择器之基本过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
jquery中的html方法使用不了，只能用完最基本的innerHTML把内容展示出来2014-08-08
一样的table？不一样的table(可编辑状态table)
今天要分享的table不仅仅能显示数据，还可以对数据进行编辑，当鼠标点击数据时相应的数据格就变成可编辑的状态，废话不多说，进入今天的主题2012-09-09
jquery Moblie入门—hello world的示例代码学习
jquery Moblie入门：Hello World的示例代码学习，感兴趣的朋友可以了解下哦2013-01-01
这篇文章主要介绍了浅谈jQuery的offset()方法及示例分享的相关资料,需要的朋友可以参考下2015-07-07
这篇文章收集了33个优秀的 jQuery 图片插件分享给大家。2012-03-03
别踩白块是一款简单易上手的数字小游戏,下面这篇文章主要给大家介绍了关于使用jquery实现别踩白块小游戏的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
最新评论