chartjs默认背景颜色到列

Question

您好，我如何为数据集列设置默认背景颜色？就像图片上的一样。 列的灰色部分。所以每列都有从 0 到最大值的灰色背景颜色。

这是我的数据图表的代码。我查看了 chart.js 网站上的示例，但我找不到任何关于这种情况的信息

var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
        datasets: [{
                label: 'Capacity',
                data: [20.7, 10, 40, 2, 100, 43, 34],
                backgroundColor: '#43d100'
            },
            {
                label: 'Confirmed',
                data: [11.4, 100, 20, 42, 10, 20, 65],
                backgroundColor: '#dc1f1f'
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        layout: {
            borderWidth: 0
        },
        scales: {
            xAxes: [{
                stacked: true,
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }],
            yAxes: [{
                stacked: true,
                ticks: {
                    beginAtZero: true,
                    display: false,
                    max: 200,
                    fill: "#07C"
                },
                gridLines: {
                    display: false,
                    borderWidth: 0,
                    drawBorder: false
                }
            }]
        }
    }
});

Answer 1

列背景颜色不存在选项。
需要添加第三个系列来表示背景。
这可以通过从最大值中减去原始值来轻松完成。
可以使用filter 选项删除背景系列的工具提示。

请参阅以下工作 sn-p...

$(document).ready(function() {
    // original datasets
    var chartData = [{
        label: 'Capacity',
        data: [20.7, 10, 40, 2, 100, 43, 34],
        backgroundColor: '#43d100'
    },
    {
        label: 'Confirmed',
        data: [11.4, 100, 20, 42, 10, 20, 65],
        backgroundColor: '#dc1f1f'
    }];

    // max value - background dataset
    var maxValue = 200;
    var maxData = {
        label: 'Max',
        data: [],
        backgroundColor: '#cccccc'
    };

    // subtract each dataset value from max value
    chartData.forEach(function (dataset) {
        dataset.data.forEach(function (value, index) {
            if (maxData.data.length <= index) {
                maxData.data.push(maxValue);
            }
            maxData.data[index] -= value;
        });
    });

    // add background dataset
    chartData.push(maxData);

    var ctx = document.getElementById("data");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
            datasets: chartData  // <-- modified dataset
        },
        options: {
            legend: {
                display: false
            },
            layout: {
                borderWidth: 0
            },
            scales: {
                xAxes: [{
                    stacked: true,
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }],
                yAxes: [{
                    stacked: true,
                    ticks: {
                        beginAtZero: true,
                        display: false,
                        max: 200,
                        fill: "#07C"
                    },
                    gridLines: {
                        display: false,
                        borderWidth: 0,
                        drawBorder: false
                    }
                }]
            },
            // remove tooltip for background dataset
            tooltips: {
                filter: function (tooltipItem, data) {
                    return (tooltipItem.datasetIndex < (chartData.length - 1));
                },
            }
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="data"></canvas>