堆疊圖是數據可視化中常見的一種圖表類型，它通過堆疊多個數據系列來展示整體和各部分之間的關系。在javascript中，我們可以使用一些開源的庫來實現堆疊圖的繪制，比如D3.js和Highcharts等。

D3.js是一款流行的數據可視化庫，它提供了豐富的API和組件，可以繪制各種類型的圖表。下面是一個簡單的堆疊圖的示例代碼：

var data = [
{ month: "Jan", apples: 50, bananas: 20, oranges: 30 },
{ month: "Feb", apples: 45, bananas: 23, oranges: 37 },
{ month: "Mar", apples: 60, bananas: 15, oranges: 25 },
{ month: "Apr", apples: 35, bananas: 18, oranges: 47 },
{ month: "May", apples: 20, bananas: 30, oranges: 50 }
];
var stack = d3.stack().keys(["apples", "bananas", "oranges"]);
var series = stack(data);
var svg = d3.select("svg");
var width = svg.attr("width");
var height = svg.attr("height");
var margin = { top: 20, right: 20, bottom: 30, left: 50 };
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.domain(data.map(function(d) { return d.month; }))
.range([0, width - margin.left - margin.right])
.padding(0.1);
var y = d3.scaleLinear()
.domain([0, d3.max(series, function(d) { return d3.max(d, function(d) { return d[1]; }); })])
.range([height - margin.top - margin.bottom, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10);
g.selectAll(".serie")
.data(series)
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d) { return z(d.key); })
.selectAll("rect")
.data(function(d) { return d; })
.enter().append("rect")
.attr("x", function(d) { return x(d.data.month); })
.attr("y", function(d) { return y(d[1]); })
.attr("height", function(d) { return y(d[0]) - y(d[1]); })
.attr("width", x.bandwidth());

以上代碼實現了一個簡單的堆疊圖，其中使用了D3.js的幾個核心組件和API。首先，使用d3.stack()函數對數據進行堆疊處理，返回一個由多個序列組成的數組。然后，使用d3.scaleBand()和d3.scaleLinear()函數來定義x軸和y軸的比例尺，結合d3.schemeCategory10定義序列色彩，最后使用selectAll()和append()函數繪制矩形元素。

與D3.js相比，Highcharts是一款更易用、可配置性更高的數據可視化庫。以下是一個使用Highcharts繪制堆疊圖的示例代碼：

Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Monthly Fruit Consumption'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
min: 0,
title: {
text: 'Total Fruit Consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '{point.x}
',
pointFormat: '{series.name}: {point.y}
Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'Apples',
data: [50, 45, 60, 35, 20]
}, {
name: 'Bananas',
data: [20, 23, 15, 18, 30]
}, {
name: 'Oranges',
data: [30, 37, 25, 47, 50]
}]
});

以上代碼使用Highcharts提供的選項配置，來繪制一個堆疊柱狀圖。其中，使用chart、title、xAxis、yAxis、legend、tooltip、plotOptions等選項來定義圖表的各個部分和交互事件；使用series選項來定義數據系列和數據點。

總之，無論是使用D3.js還是Highcharts，都可以輕松繪制堆疊圖來展示數據的分布和比例。通過靈活運用API和選項，我們還可以將堆疊圖和其他類型的圖表結合起來，并實現更加復雜的數據可視化。