如何使用Chart.js实现“水平”条形图和折线图的混合图表？
如何使用Chart.js实现“水平”条形图和折线图的混合图表？
提问于 2020-11-12 04:09:46
有了竖条，整个混合图表呈现得很好。但是当我用two X Axes and one Y Axis进行horizontally时，只有条形图会出现，而折线图不会出现。我看过其他问题，但都没有具体讨论过这个问题。
This is what I want to achieve using 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>
回答 1
Stack Overflow用户
发布于 2020-11-12 15:06:12
我认为问题是，它试图对x轴使用标签，对y轴使用数据。
对于Chart.js v2.x，您可以尝试以对象数组[{x: 4, y: 'Information Security'}, {x: ...的形式提供行的数据，我认为这应该可以。
在v3 (仍处于测试阶段)中，没有horizontalBar图表类型。相反，有一个新的选项indexAxis，它适用于所有图表类型。migration guide to 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64793461
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号