ChartJS从内部馅饼中删除标签

问题描述 投票:0回答:1

enter image description here

我想删除馅饼内部的标签或更改其颜色,同时保留设置的工具提示(悬停时)。>>

这是我的代码:

// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#fffff';

// Pie Chart Example
var ctx = document.getElementById("pieAnchorTypes");
var myPieChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Semi-opti", "Optimisée", "Générique", "Branding", "URL"],
        datasets: [{
            data: anchorTypesData,
            backgroundColor: ['#4e73df', '#D62600', '#36b9cc', '#1cc88a', '#565761'],
            hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
    },
    options: {
        maintainAspectRatio: false,
        tooltips: {
            backgroundColor: "rgb(255,255,255)",
            bodyFontColor: "#858796",
            borderColor: '#dddfeb',
            borderWidth: 1,
            xPadding: 15,
            yPadding: 15,
            displayColors: false,
            caretPadding: 10,
            callbacks: {
                label: function (tooltipItem, data) {
                    var dataset = data.datasets[tooltipItem.datasetIndex];
                    var meta = dataset._meta[Object.keys(dataset._meta)[0]];
                    var total = meta.total;
                    var currentValue = dataset.data[tooltipItem.index];
                    var percentage = parseFloat((currentValue / total * 100).toFixed(1));
                    return currentValue + ' (' + percentage + '%)';
                },
                title: function (tooltipItem, data) {
                    return data.labels[tooltipItem[0].index];
                }
            }
        },
        cutoutPercentage: 80,

        legend: {
            display: true,
            position: "right"
        }
    },
});

我似乎无法找到标签最初显示在此处的原因,当我以百分比形式激活工具提示时它们会出现。

我想删除馅饼中的标签或更改其颜色,同时保留设置的工具提示(悬停时)。这是我拥有的代码://设置新的默认字体系列和字体...

chart.js
1个回答
0
投票

下一次,请添加一个正在工作

© www.soinside.com 2019 - 2024. All rights reserved.