如何在 Chartjs 3.1 中的两条特定行之间添加背景颜色

Question

我想在两条特定线之间添加背景颜色。

喜欢这张图片。

如何在两条线之间添加背景颜色。如果您检查了图像，我需要在二月至三月的两条线之间设置背景颜色。我检查了官方文档，但没有找到 3.1 版本的任何内容。

请指导我。谢谢。

这是我的所有代码。

 var selectedPoint;
    window.chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(231,233,237)'
    };

    var mainDataset = [];

    mainDataset['line'] = [
        20, 22, 22 , 22, 23, 12, 13, 14, 22, 25, 27, 27,
        20, 20, 21 , 22, 22, 22, 30, 31, 31, 30, 31, 31.5,
    ];

    mainDataset['months'] = [
    "08/04 08:00", "08/04 12:00", "08/04 16:00", "08/04 20:00", "09/04 00:00", 
    "09/04 04:00", "09/04 08:00", "09/04 12:00", "09/04 16:00", "09/04 20:00", 
    "10/04 00:00", "10/04 04:00", "10/04 08:00", "10/04 12:00", "10/04 16:00", 
    "10/04 20:00", "11/04 00:00", "11/04 04:00", "11/04 08:00", "11/04 12:00", 
    "11/04 16:00", "11/04 20:00", "12/04 00:00", "12/04 04:00"
    ];

    mainDataset['comments'] = [
        '', '', '' , '', '', '', '', '', '', '', '', '',
        '', '', '' , '', '', '', '', '', '', '', '', 'Last Comment',
    ];

    var config = {
        type: 'line',
        data: {
            labels: mainDataset['months'],
            datasets: 
            [
                {
                    borderWidth: 1, // Line thickness
                    pointRadius: 2, // Point thickness
                    label: "Measured Value",
                    fill: false,
                    backgroundColor: window.chartColors.green,
                    borderColor: window.chartColors.green,
                    data: mainDataset['line'],
                },
                {
                    label: "Alarm Upper Limit",
                    fill: false,
                    backgroundColor: 'red',
                },
                {
                    label: "Alarm Lower Limit",
                    fill: false,
                    backgroundColor: '#990000'
                }
            ]
        },
        options: {
            //events: ['click'],

            onClick: function(event, legendItem, legend) {
                if(legendItem[0]) {
                    var dataInd = legendItem[0].index;
                    var lineInd = legendItem[0].datasetIndex;
                    var clickedData = legendItem[0].element.parsed.y;
                    //var clickedData = myLine.data.datasets[lineInd].data[dataInd];
        
                    var input = prompt(` Value: ${clickedData} \n Comment: ${mainDataset['comments'][dataInd]} \n Please enter your Comments`, "");
                    if (input != null) {
                            /* 
                            to make it realtime, 
                            first update data into database by ajax call. 
                             Then get data and update line array. Then call update method. 
                             */
                            
                            mainDataset['comments'][dataInd] = input;
                            myLine.update();
                    }
                }
            },
            responsive: true,
            title:{
                display:true,
                text:'Chart.js Line Chart'
            },
            plugins: {
                tooltip: {
                    backgroundColor: 'green',
                    callbacks:  {
                        afterLabel: (data) => {
                            var dataInd = data.dataIndex;
                            var lineInd = data.datasetIndex;
                            var comment = mainDataset['comments'][dataInd];
                            
                            return [`${comment}`];
                        },
                        /*afterBody: (data) => {
                            var dataInd = data[0].dataIndex;
                            var lineInd = data[0].datasetIndex;
                            
                            return [`afterBody: DataSet Index :${lineInd} & Data Index :${dataInd}`];
                        }*/
                    }
                },
                title: {
                    display: true,
                    text: 'Custom Chart Title'
                }
            },

            hover: {
                mode: 'nearest',
                intersect: true,
            },
            scales: {
                x: {
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Month'
                    },
                    ticks: {
                        autoSkip: false,
                        maxRotation: 90,
                        minRotation: 90,
                        
                    },

                   
                },
                y: {
                    display: true,
                    scaleLabel: {
                        display: true
                    },
                    suggestedMin: 0,
                    suggestedMax: 100,
                    grid: {
                        drawBorder: false,
                        borderDash: [8, 4],
                        color: function(context) {
                          if (context.tick.value == 10) {
                            return '#990000';
                          } else if (context.tick.value == 30) {
                            return 'red';
                          }
              
                          return '#EDEDED';
                        },
                      }
                }
            },
        }
    };

    var ctx = document.getElementById("canvas").getContext("2d");
    var myLine = new Chart(ctx, config);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  
    <section id="print-area">
        <div style="width:100%;">
            <canvas id="canvas"></canvas>
        </div>
    </section>


<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" integrity="sha512-RGbSeD/jDcZBWNsI1VCvdjcDULuSfWTtIva2ek5FtteXeSjLfXac4kqkDRHVGf1TwsXCAqPTF7/EYITD0/CTqw==" crossorigin="anonymous"></script>

</body>
</html>

Answer 1

您可以使用Chartjs注释插件为特定区域添加背景！