html如何绘制面积图,Highcharts堆积面积图(Highcharts Stacked Area Chart)

该博客展示了一段使用Highcharts库创建的区域人口增长历史与预测的面积图。图表详细列出了1750年至2050年亚洲、非洲、欧洲、美洲和大洋洲的人口数据,并通过堆叠面积图直观地展现了各地区人口变化趋势。
摘要由CSDN通过智能技术生成
Highcharts Tutorial

$(document).ready(function() {

var chart = {

type: 'area'

};

var title = {

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

};

var subtitle = {

text: 'Source: Wikipedia.org'

};

var xAxis = {

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

tickmarkPlacement: 'on',

title: {

enabled: false

}

};

var yAxis = {

title: {

text: 'Billions'

},

labels: {

formatter: function () {

return this.value / 1000;

}

}

};

var tooltip = {

shared: true,

valueSuffix: ' millions'

};

var plotOptions = {

area: {

stacking: 'normal',

lineColor: '#666666',

lineWidth: 1,

marker: {

lineWidth: 1,

lineColor: '#666666'

}

}

};

var credits = {

enabled: false

};

var 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]

}

];

var json = {};

json.chart = chart;

json.title = title;

json.subtitle = subtitle;

json.xAxis = xAxis;

json.yAxis = yAxis;

json.tooltip = tooltip;

json.plotOptions = plotOptions;

json.credits = credits;

json.series = series;

$('#container').highcharts(json);

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值