首页 文章

图表JS:每个数据集中特定数据索引的圆环图和隐藏工具提示

提问于
浏览
1

我正在尝试使用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

1 回答

  • 0

    chart.js 中的那些数据集在其他图表中不起作用 series 但是基于索引 . 因此,您只需要两个 datasets ,然后您必须相应地映射这些值;所以在 data 数组的 both 上的 index position 0, 1, 2, 3, ... 总和为 100 .

相关问题