Chars.Js-在背景中突出一个区域

Question

我需要用介于0.5和1.5之间的不同颜色突出显示图表的固定区域。

当前我的图表如下：

期望的结果是这样的：

如您在上图中所看到的，目的是要使用不同颜色的固定条，即始终触摸最大Y值（此图表会根据绘制的值自动调整最大Y值） 。想法是显示该区域内或附近的红色条。这是此图表的当前配置：

configPotential = {
        type: 'bar',
        data: {
            labels: [],
            datasets: [{
                data: [],
                borderWidth: 0,
                borderColor:'#E16972',
                fill: true,
                backgroundColor: "#E16972",
                order: 1
            }]
        },
        options: {
            animation: {
                duration: false, //remove animation
            },
            responsive: true,
            tooltips: {
                enabled: false
            },
            title: {
                display: false
            },
            legend: {
                display: false
            },
            elements: {
                point:{
                    radius: 0
                }
            },
            scales: {
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'PSD (Hz/s²)'
                    },
                    ticks: {
                        beginAtZero: true,
                        suggestedMax: 0.2
                    }
                }],
                xAxes: [{
                    display: false,
                },
                {
                    gridLines : {
                        display : false
                    },
                    scaleLabel: {
                        display: false
                    },
                    type: 'linear',
                    ticks: {
                        beginAtZero: true,
                        autoSkip: false,
                        min: 0,
                        max: 0.5,
                        stepSize: 0.1,


                    }
                }]
            }
        }
    }

Answer 1

使用插件Chart.Js注释-enter link description here解决

config = {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            data: [],
            borderWidth: 0,
            borderColor:'#E16972',
            fill: true,
            backgroundColor: "#E16972",
            order: 1
        }]
    },
    options: {
        animation: {
            duration: false, //remove animation
        },
        responsive: true,
        tooltips: {
            enabled: false
        },
        title: {
            display: false
        },
        legend: {
            display: false
        },
        elements: {
            point:{
                radius: 0
            }
        },
        scales: {
            yAxes: [{
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'PSD (Hz/s²)'
                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 0.2
                }
            }],
            xAxes: [{
                display: false,
            },
            {
                gridLines : {
                    display : false
                },
                scaleLabel: {
                    display: false
                },
                type: 'linear',
                ticks: {
                    beginAtZero: true,
                    autoSkip: false,
                    min: 0,
                    max: 0.5,
                    stepSize: 0.1,
                }
            }]
        },
        annotation: {
            drawTime: 'beforeDatasetsDraw',
            annotations: [{
                type: 'box',
                xScaleID: 'x-axis-1',
                yScaleID: 'y-axis-1',
                xMin: 0.5,
                xMax: 0.15,
                yMin: 0,
                backgroundColor: 'rgba(195,207,221, 0.5)',
                borderColor: 'rgba(195,207,221, 0.5)',
            }]
        }
    }
}