chartjs 4.2.1 change datalabes style vue

mlnl4t2r  于 2023-04-20  发布在  Chart.js
关注(0)|答案(1)|浏览(198)

我正在使用vue和chartjs我想改变datalabes样式。我有3个datalabes,我想改变第二个标签样式从正常到粗体。
我尝试了什么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],所以我不能确认这种风格是否有效。
请帮我修改数据标签的个人风格...

6vl6ewon

6vl6ewon1#

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

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

相关问题