Question

我试图绘制一个chartJS甜甜圈图，而不是在单个数据集上显示每个数据，我希望每个唯一的数据（带有自己的唯一标签）都显示在自己的数据集上。这意味着要表示每个数据集上的数据仍需要两段数据： -理想值（即80％） -差异值（即20％）

经过一些研究，我弄清楚了如何使用回调函数在每个数据值上显示数据集标签，并在其数字值后添加百分比字符。现在，我试图隐藏每个数据集中第二个数据值的工具提示。我是javascript新手，因此不胜感激！干杯。

Chart.defaults.global.defaultFontSize = 16;
Chart.defaults.global.defaultFontColor = '#000';

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
    datasets: [
    /* Outer doughnut data starts*/
    {
        data: [90, 10],
        backgroundColor: [
            'rgba(210, 35, 42, 1)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #1'
    },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
        data: [50, 50],
        backgroundColor: [
            'rgba(210, 35, 42, 0.75)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #2'
    },
    /* Inner doughnut data ends*/
    {
        data: [15, 85],
        backgroundColor: [
            'rgba(210, 35, 42, 0.5)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #3'
    },
    {
        data: [5, 95],
        backgroundColor: [
            'rgba(210, 35, 42, 0.25)',
            'rgba(0, 0, 0, 0.05)'
        ],
        label: 'Skill #4'
    }
    ],
},
options: {
    title: {
        display: true,
        text: 'My Skills',
        fontSize: 24,
    },
    scales: {
        xAxes: [{
            gridLines: {
                display: false,
                drawBorder: false,
            },
            ticks: {
                display: false,
            }
        }],
        yAxes: [{
            gridLines: {
                display: false,
                drawBorder: false,
            },
            ticks: {
                display: false,
            }
        }]
    },
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var dslabelamt = dataset.data[tooltipItem.index];
                return data.datasets[tooltipItem.datasetIndex].label + ': ' + dslabelamt + '%';
            }
        }
    }   
}
});

https://codepen.io/manudan711/pen/aadYRj

Answer 1

chart.js中的那些数据集在其他图表中的工作方式与series不同，但是基于索引。因此，您只需要两个datasets，然后必须相应地映射这些值；这样index position数组中的两个上的0, 1, 2, 3, ... data总计为100。

Charts JS：每个数据集中特定数据索引的甜甜圈图和隐藏工具提示

1 个答案: