javascript - Chart.JS多个插件无法运行

我正在使用chart.js并试图向同一个图表添加两个插件，但是当应用时，两个插件都消失了，控制台中没有直接错误。
有人知道如何在同一个图中实现两个插件吗？
First pulgin
Second plugin referance
基本上，图表必须在线图上显示数据标签，同时绘制YAXIS线，但只从线图上的点开始。
由于某些原因，当两者都应用时，图表将不会显示其中任何一个。

    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/[email protected]"></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 = new Chart(document.getElementById('chart'), {
    type : 'line',
    data : {
        labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
        datasets : [ {
            label : 'My first dataset',
            borderWidth : 1,
            borderColor : 'rgb(255,0, 0)',
            data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
             datalabels: {
          align: 'end',
          anchor: 'end',
                  backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
             }
        }]
    },
    options : {
        scales : {
			xAxes : [ {
				gridLines : {
                    display : false,
					color: 'rgba(255, 120, 12, .2)',
					lineWidth: 5
                }
			} ],
			yAxes : [{
			    gridLines : {
                    display : false,
					color: 'rgba(255, 120, 12, .2)',
					lineWidth: 5
                },
                ticks : {
                    beginAtZero: true
                }
            }]
        },
	},
    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;
                }
            }
        }
});

>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>

关于javascript - Chart.JS多个插件无法运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57608968/