搜索

首页  >  问答  >  正文

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

<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>
P粉541796322P粉541796322528 天前711

全部回复(1)我来回复

  • P粉627136450

    P粉6271364502023-09-03 11:27:26

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

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

    回复
    0
  • 取消回复