Javascript Chart.JS多个插件无法运行

我正在使用chart.js，并试图向同一个图表添加两个插件，但当应用时，两个插件都会消失，并且控制台中没有直接错误

有人知道如何在同一个图上实现两个插件吗

基本上，图形必须在折线图上显示数据标签，同时绘制坐标线，但只能从折线图上的点开始

由于某些原因，当两者都应用时，图表将不会显示其中任何一个

    Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
        color : '#ffffff'
    })
    // Chart.plugins.unregister(ChartDataLabels);
    // var chart = new Chart(ctx, {
    // / plugins: [ChartDataLabels],
    // options: {
    // // ...
    // }
    // })
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type : 'line',

        // The data for our dataset
        data : {
            labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
            datasets : [ {
                label : 'My first dataset',
                borderWidth : 3,
                borderColor : 'rgb(255,0, 0)',
                data : data1,
            } ]
        },

        // Configuration options go here
        options : {
            elements : {
                point : {
                    radius : 3
                }
            },
            legend : {
                display : false,
                labels : {
                    fontColor : "white",
                    fontSize : 18
                }
            },
            scales : {
                yAxes : [ {
                    ticks : {
                        fontSize : 0,
                        beginAtZero : false,
                        max : 40,
                    },
                    gridLines : {
                        display : false,
                        drawBorder : false,
                    }
                } ],
                xAxes : [ {
                    ticks : {
                        fontColor : "white",
                        fontSize : 14,
                        beginAtZero : 0,
                    },
                    gridLines : {
                        display : false,
                    }
                } ]
            },
             plugins : [ { // this is the magical bit :)
                        afterRender : function(c, options) {
                            let
                            meta = c.getDatasetMeta(0), max;
                            c.ctx.save();
                            c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
                            c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
                            c.ctx.beginPath();
                            meta.data
                                    .forEach(function(e) {
                                        if (max == undefined
                                                || c.config.data.datasets[0].data[e._index] > max) {
                                            max = c.config.data.datasets[0].data[e._index];
                                        }
                                        c.ctx.moveTo(e._model.x,
                                                meta.dataset._scale.bottom);
                                        c.ctx
                                                .lineTo(e._model.x,
                                                        e._model.y);
                                    });
                            c.ctx.textBaseline = 'top';
                            c.ctx.textAlign = 'right';
                            c.ctx.fillStyle = 'black';
                            c.ctx.fillText('Max value: ' + max,
                                    c.width - 10, 10);
                            c.ctx.stroke();
                            c.ctx.restore();
                        }
                    } ],
            tooltips : {
                callbacks : {
                    label : function(tooltipItem) {
                        console.log(tooltipItem)
                        return tooltipItem.yLabel;
                    }
                }
            }
        }

    });



var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
    myChart(data1);

js代码

<script src="js/chart.js"></script>
    <!-- data label .js -->
<script
    src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.5.0"></script>
    <!-- yAxis lines .js -->
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

var chart=新图表（document.getElementById（'chart'），{
键入：“行”，
数据：{
标签：[“周二”、“周三”、“周四”、“周五”、“周六”、“周日”、“周日”，
数据集：[{
标签：“我的第一个数据集”，
边框宽度：1，
边框颜色：“rgb（255,0,0）”，
数据：[1,9,12,3,15,8,2，-5,3,4,5,7]，
数据标签：{
对齐：“结束”，
主持人:"结束",，
背景颜色：“rgb（255、120、12、2）”，
边界半径：20
}
}]
},        
选项：{
比例：{
xAxes:[{
网格线：{
显示：假，
颜色：“rgba（255、120、12、2）”，
线宽：5
}
} ],
雅克斯：[{
网格线：{
显示：假，
颜色：“rgba（255、120、12、2）”，
线宽：5
},
滴答声：{
贝吉纳泽罗：是的
}
}]				
},
},
插件：[{//这是神奇的一点：）
afterRender:函数（c，选项）{
设meta=c.getDatasetMeta（0），最大值；
c、 ctx.save（）；
c、 ctx.strokeStyle=c.config.options.scales.xAxes[0].gridLines.color；
c、 ctx.lineWidth=c.config.options.scales.xAxes[0].gridLines.lineWidth；
c、 ctx.beginPath（）；
meta.data.forEach（函数（e）
{
if（max==undefined | | | c.config.data.datasets[0].data[e.\u index]>max）{
max=c.config.data.datasets[0]。数据[e.\U索引]；
}
c、 移动到（e._model.x，meta.dataset._scale.bottom）；
c、 ctx.lineTo（e._model.x，e._model.y）；
});
c、 ctx.textb基线='top'；
c、 ctx.textAlign='right'；
c、 ctx.fillStyle='黑色'；
c、 ctx.fillText（'最大值：'+最大值，c.宽度-10,10）；
c、 ctx.stroke（）；
c、 ctx.restore（）；
}
}],
工具提示：{
回调：{
标签：函数（工具提示项）{
console.log（工具提示项）
返回tooltipItem.yLabel；
}
}
}        
});


Hello，我通过添加代码片段对您的代码进行了编辑，但代码的工作方式与我当前的代码完全相同。您能详细解释一下您的问题吗？您好，每个点上都没有数据标签值，点上的线不从yAxis形成并截取XaxiHello，很抱歉，但这不是需要的。当您检查这些链接时，图形的直线上应该有数据标签，直线必须从X轴沿Y轴到直线图形的数据点。添加borderRadius属性