Chart.js datalabels插件语法求助：自定义数据点标签文本

你的代码里有两个关键问题导致无法生成自定义格式的标签：一是数据集结构错误（嵌套了多余的datasets），二是没用到chartjs-plugin-datalabels的核心formatter函数来生成自定义文本。以下是修改后的完整代码，以及关键部分的说明：

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <body>
        <div>
            <canvas id="linechart" width="500" height="500" style="display: block; box-sizing: border-box; height: 400px; width: 400px;"/>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"/>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"/>
        <script>
var linedata = {
    datasets: [
        // 单独的数据点
        {
            data: [{x:70,y:50}],
            // 该数据集的标签配置
            datalabels: {
                color: 'red',
                formatter: function(value) {
                    return 'temp: ' + value.x; // 自定义标签内容
                }
            }
        },
        // 带曲线的4个数据点
        {
            data: [
                {x: 0, y: 90},
                {x: 69, y: 78},
                {x: 150, y: 55},
                {x: 165, y: 0}
            ],
            showLine: true,
            fill: false,
            lineTension: 0.4,
            borderColor: 'rgba(10, 200, 40, 1)',
            // 该数据集的标签配置
            datalabels: {
                color: 'yellow',
                formatter: function(value) {
                    return 'pressure: ' + value.y; // 统一生成"前缀+数值"格式
                }
            }
        }
    ]
};
var chartOptions = {
    plugins: {
        datalabels: {
            // 全局默认配置，会被数据集级别的配置覆盖
            font: {
                weight: 'bold'
            }
        }
    },
    animation: {
        duration: 0
    },
    responsive: false,
    maintainAspectRatio: true,
    tooltips: {
        mode: 'index',
        intersect: false,
    },
    hover: {
        mode: 'nearest',
        intersect: true
    },
    scales: {
        x: { // Chart.js v3.x 用x代替xAxes数组
            type: 'linear',
            position: 'bottom',
            ticks: {
                stepSize: 10,
                max: 180
            }
        },
        y: { // Chart.js v3.x 用y代替yAxes数组
            ticks: {
                stepSize: 10,
                max: 100
            }
        }
    }
};
var lineID = document.getElementById('linechart').getContext('2d');
var lineChart = new Chart(lineID, {
    type: 'scatter',
    data: linedata,
    options: chartOptions,
    plugins:[ChartDataLabels]
});
</script>
    </body>
</html>

关键修改说明 #

1. 修正数据集结构：移除了你第二个数据集中嵌套的多余datasets数组，直接在数据集对象下配置datalabels，这是Chart.js数据集的正确结构。

2. 使用formatter函数生成自定义标签：

   • 这个函数是插件的核心，接收当前数据点的value（即{x,y}对象），你可以返回任意格式的文本，比如固定前缀+数值，或者根据需求拼接内容
   • 如果需要给不同数据点设置不同前缀，可以结合context参数里的dataIndex（数据点索引）做分支判断

3. 适配Chart.js v3.x的刻度配置：你原本的代码用了旧版的xAxes/yAxes数组写法，v3.x已改为直接用x/y对象配置刻度，这部分修正后避免潜在报错。

4. 配置优先级：全局plugins.datalabels下的是默认配置，每个数据集里的datalabels配置会覆盖全局设置，比如颜色、字体样式等。

内容的提问来源于stack exchange，提问作者LeonDeDan