Ändern Sie den Datenbeschriftungsstil von Chart.js 4.2.1 in Vue

Question

Ich verwende Vue und ChartJS und möchte den Stil der Datenbeschriftungen ändern.

Ich habe drei Datenbeschriftungen und möchte den Stil der zweiten Beschriftung von normal auf fett ändern.

Was ich versucht habe - 1

plugins: {
    Legende: {
        Anzeige: falsch,
    },
    Tooltip: {
        aktiviert: falsch,
    },
    Datenaufkleber: {
        Formatierer: Funktion (Wert, Kontext) {
            if (context.dataIndex === 1) {
                var ctx = context.chart.ctx;
                ctx.font = "bold 20px 'Noto Sans Kr', serifenlos";
                ctx.fillStyle = "#333";
                console.log(ctx.fontWeight);
            }
            Rückgabewert + "원";
        },
    },
},

Was ich versucht habe - 2

plugins: {
    Legende: {
        Anzeige: falsch,
    },
    Tooltip: {
        aktiviert: falsch,
    },
    Datenaufkleber: {
        Formatierer: Funktion (Wert, Kontext) {
            if (context.dataIndex === 1) {
                zurückkehren {
                    Text: Wert,
                    Stil : {
                        Gewicht: 'fett'
                    }
                }
            }
            Rückgabewert + "원";
        },
    },
},

Der von der zweiten Methode zurückgegebene Text ist [object object], daher kann ich nicht bestätigen, dass der Stil ordnungsgemäß funktioniert.

Bitte helfen Sie mir, einzelne Stile der Datenbank zu ändern.

Answer 1

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

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