如何使用 chart.js 和 datalabels 绘制折线图应该显示答案

【问题标题】：how to draw Line chart using chart.js and datalabels should be shown如何使用 chart.js 和 datalabels 绘制折线图应该显示
【发布时间】：2022-01-25 01:42:28
【问题描述】：

在上图中，我无法在显示工具提示的点上显示datalabels。而不是工具提示，我只想要那里显示的值，我的代码就在其中。我不知道如何在我的折线图点上显示datalabels。

这是我根据数据库值制作折线图的脚本。

    $('canvas.LineChart').each(function(cnvindx, cnvobj) {
        var proc_id = $(cnvobj).data('proc_id');
        var dcharry         = [];
        var labelChartArr   = [];
        var ctxs = cnvobj;
        var dataChart = {
            datasets: [],
            labels: []
        };

        var optionsChart = {
            title: {
                display: true,
                text: "Offered Call's Hourly",
                position: 'top'
            },
            legend: {
                display: true,
                position: 'top',
                align: 'start',
            },
            tooltips: {
                enabled: false
            },
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align: 'end',
                    labels: {
                        value: {
                            color: 'blue'
                        }
                    }
                }
            }
        };

        var myLineChart = new Chart(ctxs, {
            type: 'line',
            data: dataChart,
            options: optionsChart
        });

        myLineChart.data.datasets[0]    = { };
        myLineChart.data.labels     = [];
        myLineChart.update();

        if(msg.myLineChart != undefined) {
            myLineChart.data.datasets[0].data = [];

            myLineChart.data.datasets[0].label = ["Offered Call's"];
            myLineChart.data.datasets[0].fill = [false];
            myLineChart.data.datasets[0].borderColor = [Offered_Call_COLOR];

            myLineChart.data.datasets[0].backgroundColor = [];

            $.each(msg.multiplebarchart, function(indx, hourData) {
                //setting line data 
                myLineChart.data.datasets[0].data.push(
                    hourData['Offered_Call']);

                //setting X axis label
                myLineChart.data.labels.push(hourData['HOUR1']);

                //setting background color      
                myLineChart.data.datasets[0].backgroundColor.push(
                    Offered_Call_COLOR);
            });

            myLineChart.update();
    
            myLineChart.render({
                duration: 500,
                lazy: false,
            });
        }
    });

【问题讨论】：

标签： javascript html jquery chart.js

【解决方案1】：

由于您的配置无法正常工作，我假设您使用的是 chart.js V3，在这种情况下您将选项放置在错误的位置，您将它们放置在 V2 位置。

如果你这样说它会起作用：

options: {
  plugins: {
    tooltip: {
      enabled: false
    }
  }
}

对于 V2 和 V3 之间的所有更改，您可以阅读migration guide

【讨论】：