Chart JS分层垂直条形图

Question

我在我的项目中使用react-chartjs-2。我们来看我给出的例子中的第一列。蓝色值为50，绿色值为20。在这种情况下，我的期望是绿色应该比蓝色低20，蓝色应该是50。但是chartjs计算50 + 20，结果是70。在chartjs中有这个配置吗?

<Bar
options={{
plugins: {
legend: {
display: false,
},
},
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false,
},
ticks: {
font: { size: 12 },
},
},
y: {
stacked: true,
grid: {
borderDash: [2, 2],
color: '#e8e8e8',
},
ticks: {
font: { size: 12 },
count: 3,
},
},
},
}}
data={{
labels: week.map(day => day.format('MMM D')),
datasets: [
{
label: 'Test 3',
data: [50, 50, 50, 50, 50],
backgroundColor: 'blue',
stack: 'Stack 0',
},
{
label: 'Test 4',
data: [20, 24, 60, 90, 50],
backgroundColor: 'green',
stack: 'Stack 0',
},
],
}}
/>

截图

Answer 1

在当前配置中，告诉chart.js将x轴和y轴堆叠在一起。

通过堆叠x轴，它将所有条移动到单个列中，而不是彼此相邻;通过堆叠y轴，它将所有条移动到彼此之上。

所以要实现你想要的行为，你需要设置堆叠为false在你的y轴配置(或只是完全删除它):

<Bar
options={{
plugins: {
legend: {
display: false,
},
},
responsive: true,
scales: {
x: {
stacked: true,
grid: {
display: false,
},
ticks: {
font: { size: 12 },
},
},
y: {
grid: {
borderDash: [2, 2],
color: "#e8e8e8",
},
ticks: {
font: { size: 12 },
count: 3,
},
},
},
}}
data={{
labels: week.map((day) => day.format("MMM D")),
datasets: [
{
label: "Test 3",
data: [50, 50, 50, 50, 50],
backgroundColor: "blue",
stack: "Stack 0",
},
{
label: "Test 4",
data: [20, 24, 60, 90, 50],
backgroundColor: "green",
stack: "Stack 0",
},
],
}}
/>;