Javascript Chart.js条形图-多个数据集标签
我目前使用chart.js制作了以下条形图 使用以下代码:Javascript Chart.js条形图-多个数据集标签,javascript,charts,chart.js,Javascript,Charts,Chart.js,我目前使用chart.js制作了以下条形图 使用以下代码: var ctx = document.getElementById("lea-comparison"); var data = { labels: ["City of London", "Tower Hamlets", "Nottingham", "Birmingham", "S Gloucestershire", "Poole", "Wokingham"], datasets: [ {
var ctx = document.getElementById("lea-comparison");
var data = {
labels: ["City of London", "Tower Hamlets", "Nottingham", "Birmingham", "S Gloucestershire", "Poole", "Wokingham"],
datasets: [
{
label: "Schools funding by LEA",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(153, 102, 255, 0.2)'],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
'rgba(255, 206, 86, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)', ],
borderWidth: 1,
data: [8595, 7014, 5309, 5218, 4196, 4194, 4158],
}
]
};
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
});
在伦敦的最佳资助学校
标签旁边,我可以再添加两个标签,并在黄色和蓝色条上标注文字吗
我尝试添加另外两个数据集,但结果是这样的
用堆叠的钢筋
编辑:3个数据集的代码如下所示
var data = {
labels: ["City of London", "Tower Hamlets", "Nottingham", "Birmingham", "S Gloucestershire", "Poole", "Wokingham"],
datasets: [
{
label: "Best funded schools in London",
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 99, 132, 0.2)',
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(255,99,132,1)',
],
borderWidth: 1,
data: [8595, 7014],
},
{
label: "Best funded schools outside London",
backgroundColor: [
'rgba(75, 192, 192, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(255, 206, 86, 1)',
'rgba(255, 206, 86, 1)'],
borderWidth: 1,
data: [5309, 5218],
},
{
label: "Poorly funded schools in England",
backgroundColor: [
'rgba(153, 102, 255, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(153, 102, 255, 0.2)'],
borderColor: [
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',
'rgba(75, 192, 192, 1)',],
borderWidth: 1,
data: [4196, 4194, 4158],
}
]
};
这就是我所期待的:
您希望得到什么,第二个的代码是什么样子的@Gacci:我已经添加了3个数据集的代码和预期的条形图,谢谢