我目前使用Chart.js
制作了以下条形图使用以下代码:
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,
});
在Best funded schools in London
标签旁边,我可以再添加两个带有文本的标签到黄色和蓝色条纹吗?
编辑: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],
}
]
};
这就是我所期待的: