Chart.js条形图 - 多个数据集标签

时间:2016-11-06 20:05:51

标签: javascript charts chart.js

我目前使用Chart.js

制作了以下条形图

Current bar chart

使用以下代码:

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标签旁边,我可以再添加两个带有文本的标签到黄色和蓝色条纹吗?

我尝试添加另外两个数据集,但最终看起来像这样 Not desired 堆积的酒吧。

编辑: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],
        }
    ]
};

这就是我所期待的:

Expected

0 个答案:

没有答案