Я пытаюсь развернуть столбчатую и сгруппированную диаграмму. У меня есть две группы и технически 4 стека в моем графике. Я хочу сделать детализацию каждого стека.
Вот моя сгруппированная и составленная столбчатая диаграмма:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ["1/5", "2/5", "3/5", "5/5"]
},
plotOptions: {
series: {
stacking: 'percent'
}
},
series: [
{
id: 'g1',
color: 'blue',
name: "group1",
data: [1, 2, 3, 4],
stack: "move"
},
{
linkedTo: 'g1',
color: 'blue',
name: "group1",
data: [5, 6, 7, 8],
stack: "delete"
},
{
id: 'g2',
color: 'green',
name: "group2",
data: [9, 10, 11, 12],
stack: "move"
},
{
linkedTo: 'g2',
color: 'green',
name: "group2",
data: [13, 14, 15, 16],
stack: "delete"
},
{
id: 'g3',
color: 'red',
name: "group3",
data: [17, 18, 19, 20],
stack: "move"
},
{
linkedTo: 'g3',
color: 'red',
name: "group3",
data: [21, 22, 23, 24],
stack: "delete"
},
{
id: 'g4',
color: 'yellow',
name: "group3",
data: [17, 18, 19, 20],
stack: "move"
},
{
linkedTo: 'g4',
color: 'yellow',
name: "group3",
data: [21, 22, 23, 24],
stack: "delete"
}
]
});
});
</script>
</body>
</html>
Но не могу понять, как заставить его сверлить. Я хочу показать столбец фиксированного размещения при развертывании следующим образом:
