Chart.js datalabels插件异常：第二个图表需显示数值而非对象

问题原因 #

你在第二个图表中通过parsing配置让Chart.js从对象数组提取YM（X轴）和YieldActual（Y轴）值，但ChartDataLabels插件的formatter默认接收的是原始数据对象，不是解析后的Y轴数值，直接拼接%就会显示对象字符串。

修复方案 #

修改第二个图表的datalabels.formatter，明确从数据对象中取出YieldActual字段：

修正后的第二个图表核心代码片段 #

datalabels: {
    anchor: 'end',
    align: 'end',
    labels: {
        value: {
            color: 'white'
        }
    },
    formatter: (val) => {
        // 从数据对象中提取实际数值再拼接%
        return val.YieldActual + '%';
    }
}

完整的第二个图表配置（修正后） #

var ctxYieldHistory = document.getElementById('barChartYieldHistory').getContext("2d");
window.myBar = new Chart(ctxYieldHistory, {
    type: 'bar',
    data: yieldDataMonthly,                
    options: {
        responsive: true,
        maintainAspectRatio: false,
        parsing: {
            xAxisKey: 'YM',
            yAxisKey: 'YieldActual'
        },
        scales: {
            y: {
                ticks: {
                    beginAtZero: false,
                    stepSize: 20,
                    callback: function (value, index, ticks) {
                        return value + '%';
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                anchor: 'end',
                align: 'end',
                labels: {
                    value: {
                        color: 'white'
                    }
                },
                formatter: (val) => {
                    return val.YieldActual + '%';
                }
            },
            annotation: {
                annotations: {
                    line: {
                        type: 'line',
                        yMin: AnnotationValue,
                        yMax: AnnotationValue,
                        borderWidth: 2,
                        borderColor: 'white'
                    }
                }
            }
        }
    }
});

额外说明 #

• 第一个图表未配置datalabels插件，自然不会显示数据标签，符合你"仅第二个图表显示"的需求。
• 确认YieldData中的每个对象确实包含YieldActual字段（从你的代码逻辑看是存在的），若字段名不一致，需对应调整。

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