创建堆叠的条形图，每个堆叠具有单个数据集 [英] Create stacked bar chart with a single dataset per stack
问题描述
说我有以下数据点:
let points = [
{key: "foo", value: 1},
{key: "foo", value: 2},
{key: "foo", value: 1},
{key: "bar", value: 2},
{key: "bar", value: 1}
];
我想创建一个类似于以下内容的图表:
I would like to create a chart that looks similar to the following:
5 +-------------------------------+
| |
4 | +-----+ |
| | | |
3 | +-----+ +-----+ |
| | | | | |
2 | | | +-----+ |
| | | | | |
1 | +-----+ | | |
| | | | | |
0 +------+-----+------+-----+-----+
foo bar
实际的数据集有许多不同的堆栈，在此示例中，我对其进行了简化.我已经可以通过以下方法实现效果，但是每个点都被视为自己的数据集，我觉得应该有一个更干净，更有效的解决方案:
The actual dataset has many different stacks, I have simplified it for this example. I have been able to accomplish the effect with the following, but every point is treated as its own dataset and I feel like there should be a cleaner and more efficient solution:
let datasets = [
{label: "foo", stack: "foo", data: [1]},
{label: "foo", stack: "foo", data: [2]},
{label: "foo", stack: "foo", data: [1]},
{label: "bar", stack: "bar", data: [2]},
{label: "bar", stack: "bar", data: [1]}
];
推荐答案
每个数据集的值都分配到各个堆叠的条形图上.因此，所需的数据集数量对应于可容纳在堆叠条形图中的最大值数量.
The values of each dataset are distributed to the various stacked bars. Therefore, the required number of datasets corresponds to the maximum number of values that can be contained in a stacked bar.
因此，对于您的示例，您需要以下三个数据集:
Accordingly, for your example you need the following three datasets:
[1, 2]
[2, 1]
[1, 0]
<html>
<head>
<title>Stacked Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<script>
var data = {
labels: ['foo', 'bar'],
datasets: [{
backgroundColor: 'red',
data: [1, 2]
}, {
backgroundColor: 'green',
data: [2, 1]
}, {
backgroundColor: 'blue',
data: [1, 0]
}]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: data,
options: {
title: {
display: true,
text: 'Stacked Bar Chart'
},
tooltips: {
mode: 'index',
intersect: false
},
legend: {
display: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
</script>
</body>
</html>这篇关于创建堆叠的条形图，每个堆叠具有单个数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
