Vue中更改Chart.js 4.2.1数据标签样式
P粉541796322
P粉541796322 2023-09-02 18:54:25
[Vue.js讨论组]

我正在使用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],所以我无法确认样式是否正常工作。

请帮助我更改数据库的个别样式。

P粉541796322
P粉541796322

全部回复(1)
P粉627136450

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

datalabels: {
    font: (context) => context.dataIndex === 1 ? ({weight: 'bold'}) : undefined 
    formatter: (value) => value + "원"
  },
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号