不同颜色的堆叠条

Question

我正在查看图表js (https://www.chartjs.org/docs/latest/samples/bar/stacked.html)的堆叠栏

它们似乎是自动堆叠在一起，这不是我想要的。在我的例子中，假设我要画5个竖条，每个竖条有2个值。前值和后值。

例如，假设前面的值是$10,000，后面的值是$8,000。我想画一个堆叠的条形图，其中10000美元的条形图是蓝色的，8000美元的条形图是黄色的，而它们的差值，2000美元的条形图是红色的，表示最初的10000美元在视觉上损失了2000美元。

同样，如果前值为$10,000，后值为$12,000，则从$10,000到$12,000的条形图颜色为绿色，表示获利。

哪里有那种图表的例子吗?我一直在努力使这个工作:/

Answer 1

不确定输出的最终目标是什么，但我认为这是您所追求的基本思想。

const stats = {
base: [800, 600],
gain: [0, 0],
loss: [0, 200],
}

const labels = ["Total", "breakdown"];
const data = {
labels: labels,
datasets: [
{
label: 'Base Money',
data: stats.base,
backgroundColor: "green",
},
{
label: 'Gains',
data: stats.gain,
backgroundColor: "lime",
},
{
label: 'Losses',
data: stats.loss,
backgroundColor: "red",
},
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}
};
var ctx = $('#myChart');
var myChart = new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>