图表JS自定义工具提示与％和标签的X和Y车轴

-1

我似乎无法找到一个足够好的答案来解决这个问题。图表JS自定义工具提示与％和标签的X和Y车轴

我试图找出如何自定义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; 
 
       }); 
 
      } 
 
     } 
 
    },

tooltip as shown

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

来源

2016-11-17 user2953657

你也许会在这里开我的玩笑，因为需要什么特别的，只是添加+“％”在标签函数返回的结尾：

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)+ " %"; 
 
      } 
 
     } 
 
    },

来源

2016-11-18 23:31:00

感谢百分比答案，这是相当新手的错误，但与x轴标签有关的问题还没有得到解答，这或多或少是主要问题 – user2953657

好吧，如果您正在考虑xLabel名称在工具提示中，可以使用标题回调进行配置： https://jsfiddle.net/6kya3Ltu/ 您可能需要自定义函数以适合您的图表类型，但实质上您可以这样做。 –

谢谢，我会尝试 – user2953657

图表JS自定义工具提示与％和标签的X和Y车轴

回答

相关问题