如何使用Chart.js实现'horizontal'条形图和折线图的混合图表？

Question

显然有了竖线，整个混合图呈现得很好。但当我用two X Axes and one Y Axis做horizontally时，只有条形图会出现，但折线图不会。我研究过其他问题，但没有一个具体讨论过。

这就是我想要使用Chart.js 实现的目标

同样出于某种原因，出于某种原因我不得不为scales.xAxes提供type: 'linear'，其中id: 'maturity'(如下面的代码所示(，否则Y轴上的字符串标签也会重复为X轴标签

var ctx = document.getElementById("myChart");
let chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Information Security', 'Asset Management', 'Human Resource Security', 'Physical Security', 'Equipment Security', 'Access Management', 'Review', "Policy Governance", 'Security Coordination', 'label10', 'label11', 'label12', 'label13'],
datasets: [{
xAxisID: 'compliance', // X axis 1
data: [25, 15, 25, 25, 45, 15, 25, 25, 25, 25, 80, 80, 80],
label: "Compliance",
backgroundColor: "#3367D6",
borderColor: 'rgba(105,159,177,1)',
categoryPercentage: 0.8,
},
{
type: 'line', // line type dataset
xAxisID: 'maturity', // X axis 2
data: [4, 4, 3, 3, 4, 5, 4, 4, 3, 3, 4, 5, 4],
label: "Threshold for Maturity",
backgroundColor: "rgba(247, 148, 30, 1)",
borderColor: 'rgba(247, 148, 30, 1)',
fill: false,
},
{
xAxisID: 'maturity', // X axis 2
data: [2, 4, 3, 2, 4, 4, 3, 3, 4, 5, 4, 4, 3],
label: "Maturity level",
backgroundColor: "#F7941E",
borderColor: 'rgba(77,20,96,1)',
categoryPercentage: 0.8,
}
]
},
options: {
responsive: true,
legend: {
align: 'end',
labels: {
usePointStyle: true
},
position: 'top'
},
scales: {
yAxes: [{
fontStyle: 'bold',
ticks: {
fontSize: 11,
},
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Domains',
fontStyle: 'bold',
fontSize: 15
}
}],
xAxes: [{
id: 'compliance',
position: 'top',
ticks: {
beginsAtZero: true,
min: 0,
stepSize: 25
},
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Compliance %',
fontStyle: 'bold',
fontSize: 15
}
}, {
id: 'maturity',
type: 'linear',
position: 'bottom',
ticks: {
min: 1,
max: 5,
stepSize: 1,
callback: function(value, index, values) {
return 'L' + value;
},
fontStyle: 'bold'
},
scaleLabel: {
display: true,
labelString: 'Maturity Level',
fontStyle: 'bold',
fontSize: 15
}
}]
}
}
})

<canvas class="chart" height="250px" id="myChart"></canvas>

Answer 1

我认为问题是，它试图为x轴使用标签，为y轴使用数据。

对于Chart.js v2.x，您可以尝试将行的数据作为对象数组提供：[{x: 4, y: 'Information Security'}, {x: ...，我认为这应该有效。

在v3(仍处于测试版(中，没有horizontalBar图表类型。相反，有一个新的选项indexAxis，适用于所有图表类型。v3 迁移指南

以下是使用v3:的方法

var ctx = document.getElementById("myChart");
let chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Information Security', 'Asset Management', 'Human Resource Security', 'Physical Security', 'Equipment Security', 'Access Management', 'Review', "Policy Governance", 'Security Coordination', 'label10', 'label11', 'label12', 'label13'],
datasets: [{
xAxisID: 'compliance', // X axis 1
data: [25, 15, 25, 25, 45, 15, 25, 25, 25, 25, 80, 80, 80],
label: "Compliance",
backgroundColor: "#3367D6",
borderColor: 'rgba(105,159,177,1)',
categoryPercentage: 0.8,
},
{
type: 'line', // line type dataset
xAxisID: 'compliance', // X axis 2
data: [4, 4, 3, 3, 4, 5, 4, 4, 3, 3, 4, 5, 4],
label: "Threshold for Maturity",
backgroundColor: "rgba(247, 148, 30, 1)",
borderColor: 'rgba(247, 148, 30, 1)',
fill: false
},
{
xAxisID: 'maturity', // X axis 2
data: [2, 4, 3, 2, 4, 4, 3, 3, 4, 5, 4, 4, 3],
label: "Maturity level",
backgroundColor: "#F7941E",
borderColor: 'rgba(77,20,96,1)',
categoryPercentage: 0.8,
}
]
},
options: {
indexAxis: 'y', // this changes the orientation for all datasets in v3
responsive: true,
legend: {
align: 'end',
labels: {
usePointStyle: true
},
position: 'top'
},
scales: {
y: {
fontStyle: 'bold',
ticks: {
fontSize: 11,
},
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Domains',
font: {
style: 'bold',
size: 15
}
}
},
compliance: {
position: 'top',
beginsAtZero: true,
min: 0,
ticks: {
stepSize: 25
},
gridLines: {
display: false
},
scaleLabel: {
display: true,
labelString: 'Compliance %',
font: {
style: 'bold',
size: 15
}
}
},
matyrity: {
type: 'linear',
position: 'bottom',
min: 1,
max: 5,
ticks: {
stepSize: 1,
callback: function(value, index, values) {
return 'L' + value;
},
font: {
style: 'bold'
}
},
scaleLabel: {
display: true,
labelString: 'Maturity Level',
font: {
style: 'bold',
size: 15
}
}
}
}
}
})

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0-beta.6/dist/chart.min.js"></script>
<canvas class="chart" height="250px" id="myChart"></canvas>