如何根据chartsjs中的值更改条形图的颜色

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<canvas id="myChart"></canvas>

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['标签1', '标签2', '标签3'], // 标签数组，用于表示每个条形的标签
        datasets: [{
            label: '数据集1',
            data: [10, 20, 30], // 数据数组，用于表示每个条形的值
            backgroundColor: 'rgba(0, 0, 0, 0.2)', // 默认的条形颜色
            borderColor: 'rgba(0, 0, 0, 1)', // 默认的条形边框颜色
            borderWidth: 1 // 默认的条形边框宽度
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        // ...
    },
    options: {
        scales: {
            // ...
        },
        plugins: {
            legend: {
                // ...
            },
            tooltip: {
                // ...
            }
        },
        // 自定义回调函数
        onBeforeUpdate: function(chart) {
            var dataset = chart.data.datasets[0];
            var bars = chart.getDatasetMeta(0).data;
            
            bars.forEach(function(bar, index) {
                var value = dataset.data[index];
                
                // 根据值更改条形的颜色
                if (value > 20) {
                    bar.backgroundColor = 'rgba(255, 0, 0, 0.2)';
                    bar.borderColor = 'rgba(255, 0, 0, 1)';
                } else {
                    bar.backgroundColor = 'rgba(0, 0, 255, 0.2)';
                    bar.borderColor = 'rgba(0, 0, 255, 1)';
                }
            });
        }
    }
});