图表JS自定义工具提示,X轴和Y轴的%和标签

Chart JS Custom tooltips with % and label for X and Y axles

本文关键字:轴的 标签 轴和 JS 自定义 工具提示 图表      更新时间:2023-09-26

对于这个问题,我似乎找不到一个足够好的答案。

我正试图找出如何自定义x轴和y轴的工具提示标签,

使用这段代码,我可以为每个工具提示定制yLabel:

    options: {
    
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "Energi, Vatten och Återvinning: " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                });
            }
        }
    },

工具提示

由于我的JS知识有限,我似乎无法将脚本修改为在值之后显示百分比符号,以及显示x轴的标签。

你可能在开玩笑,因为这里不需要任何花哨的东西,只要在label函数的末尾添加+ " %":

    options: {
    
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "Energi, Vatten och Återvinning: " + Number(tooltipItem.yLabel).toFixed(0).replace(/./g, function(c, i, a) {
                    return i > 0 && c !== "." && (a.length - i) % 3 === 0 ? "," + c : c;
                })+ " %";
            }
        }
    },

而且,在我看来,你的整个功能至少可以简化为:

    options: {
    
    tooltips: {
        callbacks: {
            label: function(tooltipItem, data) {
                return "Energi, Vatten och Återvinning: " +  Number(tooltipItem.yLabel).toFixed(0)+ " %";
            }
        }
    },