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 + "원"
  },