Vue中更改Chart.js 4.2.1資料標籤樣式
P粉541796322
2023-09-02 18:54:25
<p>我正在使用Vue和ChartJS，並且我想要更改資料標籤的樣式。 </p>
<p>我有3個資料標籤，我想要將第二個標籤的樣式從普通改為粗體。 </p>
<h2>我嘗試的方法 - 1</h2>
<pre class="brush:js;toolbar:false;">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 "원";
},
},
},
</pre>
<h2>我嘗試的方法 - 2</h2>
<pre class="brush:js;toolbar:false;">plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
datalabels: {
formatter: function (value, context) {
if (context.dataIndex === 1) {
return {
text: value,
style : {
weight: 'bold'
}
}
}
return value "원";
},
},
},
</pre>
<p>第二種方法回傳的文字是<strong>[object object]</strong>，所以我無法確認樣式是否正常運作。 </p>
<p>請幫我更改資料庫的個別樣式。 </p>
要更改字體，您應該實作可腳本化的選項
font而不是formatter。datalabels: { font: (context) => context.dataIndex === 1 ? ({weight: 'bold'}) : undefined formatter: (value) => value + "원" },