Chart.js中鼠标悬停时的格式值

monwx1rj 于 2022-11-06 发布在 Chart.js

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

我已经看了各种文件和类似的问题在这里，但似乎无法找到特定的解决方案。对不起，如果我错过了任何明显的或重复了这个问题！
作为一点背景信息，我已经使用Chart.js插件实现了一个图表，并从数据库中传递了所需的数据。这一切都工作正常，很好。
我的问题是，我需要将工具提示中的数据显示为带格式的数据，也就是带%的数字。例如，数据库中的一个数据是0.99232。虽然我知道并理解在将值传递到图表之前可以对其进行格式化，但我希望图表上也显示“%”符号。
如何将左边的字符串更改为右边的字符串？Image of what I am looking for here
我尝试使用的工具提示如下：

tooltips: 
    {
        callbacks: 
        {
            label: function(tooltipItem, data) 
            {
               return Number(tooltipItem).toFixed(2) + "%"     
            }
        },
    }

但是，当我尝试此操作时，它显示为follows

chart.js

来源：https://stackoverflow.com/questions/74027701/format-value-on-mouse-hover-in-chart-js

1条答案

按热度按时间

px9o7tmv1#

工具提示项不是一个数字，而是一个对象。请参见此处，在文档中，它是如何的：

（第三版）https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-context
（第二版）https://www.chartjs.org/docs/2.9.4/configuration/tooltip.html#tooltip-item-interface

我假设您使用的是版本2（基于您的配置），您可以尝试：

tooltips: 
{
    callbacks: 
    {
        label: function(tooltipItem, data) 
        {
           const title = data.labels[tooltipItem.index];
           const dataset = data.datasets[tooltipItem.datasetIndex];
           const value = dataset.data[tooltipItem.index]; 
           return title + ': ' + Number(value).toFixed(2) + "%";    
        }
    },
}

赞(0）回复(0）举报 2022-11-06

我来回答

Chart.js中鼠标悬停时的格式值

1条答案

相关问题

热门标签

最新问答