jquery 增加在chart.js中悬停时显示的标签的字体大小

nszi6y05 于 2023-06-05 发布在 jQuery

关注(0)|答案(1)|浏览(112)

我想增加在chart.js中悬停的标签的字体大小，我试图给予自定义文本标签，但无法增加它的字体。

var myPieChart = new Chart(ctxP, {
                            type: 'pie',
                            data: {
                                labels: datas.labels,
                                datasets: [{
                                    label: 'Dataset 1',
                                    data: datas.value,
                                    backgroundColor: datas.colour
                                }],
                                others: datas.others
                            },
                            options: {
                                hover: {
                                    mode:'index'
                                },
                                legend: {
                                    display: true,
                                    position: "right",
                                    "labels": {
                                        "fontSize": 20,
                                    }
                                },
                                tooltips: {
                                    "fontSize": 20, bodyFont:20,
                                    callbacks: {                                       
                                        label: function (tooltipItem, data) {
                                            let label = data.labels[tooltipItem.index];
                                            let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                                            let otherdata = data.others[tooltipItem.index];
                                            return ' ' + label + ': ' + value + '%  ' + otherdata;
                                        }
                                    }
                                }, hover: {
                                    mode: 'index',
                                    "label": {
                                        "fontSize": 20,
                                    }
                                }
                            }
                        })

我试过hover: { mode: 'index', "label": { "fontSize": 20, } }，但它不工作
this is how it looks right now

jquery

来源：https://stackoverflow.com/questions/76395133/to-increase-the-font-size-of-label-that-appears-on-hover-in-chart-js

1条答案

按热度按时间

qacovj5a1#

要在Chart.js 3.x中更改工具提示的字体大小，只需使用options.plugins.tooltip.titleFont.size或options.plugins.tooltip.bodyFont.size。

let ctxP=document.getElementById('mychart').getContext('2d');
let datas={
    value: [10, 15, 20, 25],
    labels: ['A', 'B', 'C', 'D']
};
var myPieChart=new Chart(ctxP, {
    type: 'pie',
    data: {
        labels: datas.labels,
        datasets: [{
            label: 'Dataset 1',
            data: datas.value,
            backgroundColor: datas.colour
        }],
        others: datas.others
    },
    options: {
        hover: {
            mode: 'index'
        },
        legend: {
            display: true,
            position: "right",
            "labels": {
                "fontSize": 20,
            }
        },
        tooltips: {
            // "fontSize": 20, bodyFont: 20,
            callbacks: {
                label: function (tooltipItem, data) {
                    let label=data.labels[tooltipItem.index];
                    let value=data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    let otherdata=data.others[tooltipItem.index];
                    return ' '+label+': '+value+'%  '+otherdata;
                }
            }
        },
        hover: {
            mode: 'index',
            "label": {
                "fontSize": 20,
            }
        },
        plugins: {
            tooltip: {
                titleFont: {
                    size: 20
                },
                bodyFont: {
                    size: 20
                }
            }
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="mychart"></canvas>

赞(0）回复(0）举报 2023-06-05

我来回答

jquery 增加在chart.js中悬停时显示的标签的字体大小

1条答案

相关问题

热门标签

最新问答