Chart.js 注释时间轴上的两条垂直线和两种不同的颜色

Question

查找代码错误，添加注解插件，图上还是没有出现竖线的可能原因是什么？此外，如何使用两种不同的颜色来表示图表上蓝线上方和下方的值？

下面是我的图表代码：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/Chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/Chart.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.1.2/chartjs-plugin-annotation.min.js" integrity="sha512-9hzM/Gfa9KP1hSBlq3/zyNF/dfbcjAYwUTBWYX+xi8fzfAPHL3ILwS1ci0CTVeuXTGkRAWgRMZZwtSNV7P+nfw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>


  var ann1  = [current_date_var, end_date_var ];
            var ann_labels1 = ["start", "stop"];
            var annotations_array1 = ann1.map(function(value, index) {
                return {
                    type: 'line',
                    id: 'vline' + index,
                    mode: 'vertical',
                    scaleID: 'x-axis-0',
                    value: value,
                    borderColor: 'red',
                    borderWidth: 1,
                    label: {
                        enabled: true,
                        position: "bottom",
                        content: ann_labels1[index]
                    }
                }
            });
            const annotation11 = {
                type: 'line',
                scaleID: 'x',
                borderWidth: 3,
                borderColor: 'black',
                value: current_date_var,
                label: {
                    rotation: 'auto',
                    content: 'Line at x=5',
                    display: true
                },
            };

            const annotation21 = {
                type: 'line',
                scaleID: 'x',
                borderWidth: 3,
                borderColor: 'black',
                value: end_date_var,
                label: {
                    rotation: 'auto',
                    position: 'start',
                    backgroundColor: 'black',
                    content: 'Line at x=90',
                    display: true
                }
            };
            var optionsTwo = {
                type: 'line',
                data: {
                    labels: ['2023-02-15', '', '', '', '', '2023-02-15', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '2023-03-15', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '2023-03-31'],
                    datasets: [{
                        label: 'Current',
                        data: [0, NaN, NaN, NaN, NaN, '60.00', NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, '70.00', NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN],
                        tension: 0.2,
                        spanGaps: true,
                        backgroundColor: colorcoderedgreen,
                        borderColor: colorcoderedgreenborder,// add fill color here 'rgb(146,239,158)' 'rgb(192,75,75)'
                        borderWidth: 1,
                        segment: {
                            borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
                            borderDash: ctx => skipped(ctx, [6, 6]),
                        },
                        spanGaps: true
                        ,fill: '+1'
                    }, {
                        label: ' ',
                        fill: false,
                        data:  [0, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 63.63636363636363, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN, 100],
                     
                        backgroundColor: 'rgb(0, 50, 150)',
                        borderColor: 'rgb(0, 50, 150)',
                        borderWidth: 1,
                        segment: {
                            borderColor: ctx => skipped(ctx, 'rgb(0,0,0,0.2)') || down(ctx, 'rgb(192,75,75)'),
                            borderDash: ctx => skipped(ctx, [6, 6]),
                        },
                        spanGaps: true
                    }]
                },
                plugins: {
                    annotation: {
                        annotations: {
                            annotation11,
                            annotation21
                        }
                    }
                },
                options: {
                 /*  annotation: {
                        drawTime: 'afterDatasetsDraw',
                        annotations: { annotation11,
                       annotation21}
                    },*/
                   /* annotation: {
                        annotations: [{
                            type: 'line',
                            mode: 'vertical',
                            scaleID: 'A',
                            value: '2023-05-15',
                            borderColor: 'rgb(75, 0, 0)',
                            borderWidth: 4,
                            label: {
                                enabled: false,
                                content: 'Test label'
                            }
                        }]
                    },*/
                    maintainAspectRatio: true,

                    elements: {
                        point: {
                            radius: 0,
                        }
                    },
                    legend: {
                        position: 'bottom',
                        display: false,
                    },
                }
            }
 
            var ctx1 = document.getElementById('mychartcanvas').getContext('2d'); 
            const chartz = new Chart(ctx1, optionsTwo);