Vue中更改Chart.js 4.2.1数据标签样式

Question

我正在使用Vue和ChartJS，并且我想要更改数据标签的样式。

我有3个数据标签，我想要将第二个标签的样式从普通改为粗体。

我尝试的方法 - 1

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                var ctx = context.chart.ctx;
                ctx.font = "bold 20px 'Noto Sans Kr', sans-serif";
                ctx.fillStyle = "#333";
                console.log(ctx.fontWeight);
            }
            return value + "원";
        },
    },
},

我尝试的方法 - 2

plugins: {
    legend: {
        display: false,
    },
    tooltip: {
        enabled: false,
    },
    datalabels: {
        formatter: function (value, context) {
            if (context.dataIndex === 1) {
                return {
                    text: value,
                    style : {
                        weight: 'bold'
                    }
                }
            }
            return value + "원";
        },
    },
},

第二种方法返回的文本是[object object]，所以我无法确认样式是否正常工作。

请帮助我更改数据库的个别样式。

Answer 1

要更改字体，您应该实现可脚本化的选项 font 而不是 formatter。

datalabels: {
    font: (context) => context.dataIndex === 1 ? ({weight: 'bold'}) : undefined 
    formatter: (value) => value + "원"
  },