Question

我已成功显示Chart.js的饼图。如果我将鼠标悬停在给定切片上，它也会返回标签以及值。

但是，该值并非用户友好;我希望将其转换为其他值，用户更容易理解。

如何访问一个给定切片的工具提示值？我似乎只能得到它们。

示例代码：

    this.examplePieChart  = new Chart(ctx1,{
        type: 'pie',
        data: {
            labels: byteLabels,
            datasets: [
                {
                    label: 'bytes',
                    data: BytesArr,
                    backgroundColor: defaultChartColors,
                },
            ]
        },
        options: {
            tooltips: {
                mode: 'label',
            }   
        }
    });

我可以访问工具提示数据的所有值，我的尝试是这样的：

            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function (tooltipItem, data) {
                        let tmpArr = [];
                        for(let i = 0; i < data.datasets[0].data.length; i++){
                            tmpArr.push(data.datasets[0].data[i].fileSize());
                        }
                        return tmpArr;
                    }
                }
            }

我运行fileSize()以将字节转换为MiB / KiB。并且它有效 - 但是，当悬停切片时，它将在任何给定切片上显示所有工具提示，而不是我悬停的切片。

如何访问饼图的单个切片的数据值并对其进行操作？目前，我只能使用data值来访问它们，这将返回整个数组。

如果没有上面的回调，我会成功显示label: value，但我想为每个切片操纵这个特定值 - 而不是一次显示所有值：o）

Answer 1

最后，可以这样访问：

        tooltips: {
            mode: 'label',
            callbacks: {
                         const currentValue = dataset.data[tooltipItem.index];
                         return currentValue.fileSize();
                }
            }
        }

如何操作Chart.js饼图的特定工具提示值？

1 个答案: