Chart JS - 条件水平行背景颜色

Question

我有点坚持根据垂直轴上的数字向 ChartJS 中的行添加条件背景颜色。

例如。

If the vertical axis is between 0 - 6, background colour for those rows is green.
If the vertical axis is between 6 - 12 background colour for those rows is grey
If the vertical axis is > 12 background colour for those rows is red

以前有人做过这样的事情吗？

我附上了一张大致描述功能的图片。

干杯!

Answer 1

Chartjs 没有选项可以做到这一点。但是，您可以编写自己的插件，并在钩子中自己绘制背景beforeDraw。

var chart = new Chart(ctx, {
    plugins: [{
        beforeDraw: function(chart) {
            //..
        }
    }]
});

您可以从图表参数获取计算 y 轴线段高度的所有信息。我在下面包含了如何实现这一点的代码片段。但请注意，这更多的是概念证明，而不是正确的实现：

var chart = new Chart(ctx, {
    plugins: [{
        beforeDraw: function(chart) {
            //..
        }
    }]
});

        var canvas = document.getElementById('myChart');
        window.chartColors = {
            red: 'rgb(255, 99, 132)',
            orange: 'rgb(255, 159, 64)',
            yellow: 'rgb(255, 205, 86)',
            green: 'rgb(51, 204, 51)',
            blue: 'rgb(54, 162, 235)',
            purple: 'rgb(153, 102, 255)',
            grey: 'rgb(201, 203, 207)'
        };

        var myLineChart = new Chart(canvas,
            {
                type: 'line',
                data: {
                    labels: ['1', '2', '3', '4', '5'],
                    datasets: [
                        {
                            label: '# of Votes',
                            fill: false,
                            backgroundColor: window.chartColors.blue,
                            borderColor: window.chartColors.blue,
                            data: [2, 5, 12.5, 9, 6.3]
                        }
                    ]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Conditional Background'
                    },
                    backgroundRules: [{
                        backgroundColor: window.chartColors.green, 
                        yAxisSegement: 6
                    }, {
                        backgroundColor: window.chartColors.grey,
                        yAxisSegement: 12
                    }, {
                        backgroundColor: window.chartColors.red,
                        yAxisSegement: Infinity
                    }],
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                stepSize: 1
                            }
                        }]
                    }
                },
                plugins: [{
                    beforeDraw: function (chart) {
                        var ctx = chart.chart.ctx;
                        var ruleIndex = 0;
                        var rules = chart.chart.options.backgroundRules;
                        var yaxis = chart.chart.scales["y-axis-0"];
                        var xaxis = chart.chart.scales["x-axis-0"];
                        var partPercentage = 1 / (yaxis.ticksAsNumbers.length - 1);
                        for (var i = yaxis.ticksAsNumbers.length - 1; i > 0; i--) {
                            if (yaxis.ticksAsNumbers[i] < rules[ruleIndex].yAxisSegement) {
                                ctx.fillStyle = rules[ruleIndex].backgroundColor;
                                ctx.fillRect(xaxis.left, yaxis.top + ((i - 1) * (yaxis.height * partPercentage)), xaxis.width, yaxis.height * partPercentage);
                            } else {
                                ruleIndex++;
                                i++;
                            }
                        }
                    }
                }]
            });