图表JS自定义工具提示,X轴和Y轴的%和标签
Chart JS Custom tooltips with % and label for X and Y axles
对于这个问题,我似乎找不到一个足够好的答案。
我正试图找出如何自定义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)+ " %";
}
}
},
相关文章:
- 轴助手上的标签与文本几何和旋转问题
- 用于x轴的Dojo图表选择性标签&网格
- 在Chart.js中隐藏y轴上的标签
- x 轴文本标签未与 D3.js 中的条形对齐
- 动态更改高图中x轴刻度标签的日期时间格式
- 使用Highcharts中的“步骤”标签选项,从轴的末尾开始
- 高图表中 X 轴的动态标签
- D3-x轴的标签是链接
- jQueryflot-适合可变范围图表的时间轴刻度标签,没有文本溢出
- 图表JS自定义工具提示,X轴和Y轴的%和标签
- d3.js中轴刻度标签的样式
- JS Sencha触摸图表:轴上标签的最大长度
- 高图在Y轴上重复相同的标签值
- 如何在Chart.js中将y轴上的数据集添加到x轴上的标签
- 如何使用日期对象作为直线轴的刻度标签
- D3js:如果其中一个轴的数据为0,如何生成X轴标签/记号
- 字符串格式的vis.js轴值标签
- jQuery flot图表-更改y轴的标签(刻度)
- 如何在高图表中以不同的颜色显示我的标签和每个x轴的完整日期
- 高图-以编程方式更改y轴的标签文本