【发布时间】：2021-08-07 15:44:35
【问题描述】：
我正在尝试在 Charts.js 3.2.0 中创建混合堆叠的水平条形图和折线图。
预期行为：堆叠条的底部有一个轴，包括轴标题，折线图的顶部有一个轴。
实际行为：底部的所有轴都显示了一个额外的轴，似乎与任何数据集都不对应。没有显示坐标区标题。
注意：代码中有几根柱线的值为零，根据生成的数据，这些值可以是非零值。
我的代码：
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
data: {
labels: ["Person 1", "Person 2", "Person 3", "Person 4", "Person 5", "Person 6", ],
datasets: [{
type: "line",
label: "Earnings",
xAxisID: "A1",
data: [10000, 20000, 30000, 5000]
},
{
label: "CAT 1",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(255,59,59, 0.2)"],
borderColor: ["rgba(255,59,59, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 2",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(241,85,54, 0.2)"],
borderColor: ["rgba(241,85,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 3",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(235,106,55, 0.2)"],
borderColor: ["rgba(235,106,55, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 4",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(227,131,53, 0.2)"],
borderColor: ["rgba(227,131,53, 1)"],
borderWidth: 1,
data: [0, 0, 32.012777777778, 0, 0, 29.378611111111, ]
},
{
label: "CAT 5",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(221,171,54, 0.2)"],
borderColor: ["rgba(221,171,54, 1)"],
borderWidth: 1,
data: [0, 0, 0, 0, 0, 0, ]
},
{
label: "CAT 6",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(218,199,52, 0.2)"],
borderColor: ["rgba(218,199,52, 1)"],
borderWidth: 1,
data: [0, 44.195555555556, 0, 0, 38.79, 0, ]
},
{
label: "CAT 7",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(192,224,66, 0.2)"],
borderColor: ["rgba(192,224,66, 1)"],
borderWidth: 1,
data: [0, 0, 0, 14.921666666667, 0, 0, ]
},
{
label: "CAT 8",
xAxisID: "B1",
type: "bar",
backgroundColor: ["rgba(124,236,93, 0.2)"],
borderColor: ["rgba(124,236,93, 1)"],
borderWidth: 1,
data: [40.216666666667, 0, 0, 0, 0, 0, ]
},
]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
x: [
{
display: true,
position: "top",
type: "linear",
title: {
text: "cost",
display: true,
},
beginAtZero: true,
id: "A1",
},
{
id: "B1",
position: "bottom",
title: {
text: "hours",
display: false,
},
beginAtZero: true
}
],
y: {
display: true,
stacked: true,
//beginAtZero: true
}
}
}
});
</script>
【问题讨论】：
标签： javascript chart.js