请原谅我有时候英语不好,荷兰语是我的母语。
我创建了一个Chart.js线图,它显示了我的主电源智能电表报告的能源使用情况。我让它几乎按照我想要的方式工作,但有一件事我不能设法让它按照我想要的方式工作,因为我不明白一件小事。
在用户“iecs”的帮助下,我在主题"Chart.js V2: Add prefix or suffix to tooltip label"中修改了工具提示中的标签,它现在很好地显示了我想要的前缀和后缀:
tooltips: {
enabled: true,
mode: 'single',
backgroundColor: 'rgba(0,0,0,0.9)',
titleFontSize: 14,
titleFontStyle: 'bold',
titleFontColor: "#FFF",
bodyFontSize: 12,
bodyFontStyle: 'normal',
bodyFontColor: "#FFF",
footerFontSize: 12,
footerFontStyle: 'normal',
footerFontColor: "#FFF",
cornerRadius: 5,
callbacks: {
label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
//Return value for label
return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
}
}
}
当我尝试添加完全相同的代码来修改标题时,我在应该显示日期和时间的地方得到了undefined
:
tooltips: {
enabled: true,
mode: 'single',
backgroundColor: 'rgba(0,0,0,0.9)',
titleFontSize: 14,
titleFontStyle: 'bold',
titleFontColor: "#FFF",
bodyFontSize: 12,
bodyFontStyle: 'normal',
bodyFontColor: "#FFF",
footerFontSize: 12,
footerFontStyle: 'normal',
footerFontColor: "#FFF",
cornerRadius: 5,
callbacks: {
title: function(tooltipItems, data) {
//Return value for title
return 'Date: ' + tooltipItems.xLabel + ' GMT+2';
},
label: function(tooltipItems, data) { // Solution found on https://stackoverflow.com/a/34855201/6660135
//Return value for label
return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
}
}
通过用户“Lukman”对主题"Print content of JavaScript object? [duplicate]"的回答,我发现我可以显示“tooltipItems对象”的内容:
alert(tooltipItems.toSource())
这显示了“title”和“label”之间关于“tooltipItems”对象的有趣区别。
“label”处的“tooltipItems”对象将以下内容显示为内容:
({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})
当“title”处的“tooltipItems”对象将此显示为内容时:
[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]
开始字符和结束字符不同。“label”的字符可以用tooltipItems.yLabel
读取,但“title”的字符不能用tooltipItems.xLabel
读取,因为它显示“undefined”。整个标题现在将是Date: undefined GMT+2
而不是Date: 2016-08-07 23:41:57 GMT+2
我错过了什么?有人能解释一下“tooltipItems”的对象内容的两个输出之间的区别,以及如何读取“xLabel”和“yLabel”索引吗?
2条答案
按热度按时间ulmd4ohb1#
我也遇到了类似的问题,但用这个解决了。
kmb7vmvb2#
我需要操作title工具提示,并解决了它。查看v3.7.1的源代码chart.js,找到title的回调,第11759行:
在我的工具提示的情况下,工作与“item.label”返回。实际上复制和粘贴代码和工程罚款,在我的情况下需要一些文本剪切,超过返回标题。
对不起,由英语,谷歌翻译的帮助.