请原谅我有时英语不好。荷兰语是我的母语。
我创建了一个 Chart.js 折线图,它显示了我的主电源智能电表报告的能源使用情况。我让它几乎按照我想要的方式工作,但有一件事我无法让它以我想要的方式工作,因为我不明白一点点。
在主题 "Chart.js V2: Add prefix or suffix to tooltip label" 的用户“iecs”的帮助下我能够在工具提示中更改标签。它现在很好地显示了我想要的前缀和后缀:
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';
}
}
在主题"Print content of JavaScript object? [duplicate]" 中用户“Lukman”的回答我发现我可以显示“tooltipItems 对象”的内容:
alert(tooltipItems.toSource())
这显示了关于“标题”和“标签”之间的“tooltipItems”对象的有趣区别。
“标签”处的“tooltipItems”对象将其显示为内容:
({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})
虽然“标题”处的“tooltipItems”对象将其显示为内容:
[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]
开始字符和结束字符不同。
“标签”之一可以用 tooltipItems.yLabel
读取,但“标题”之一不能用 tooltipItems.xLabel
读取,因为它显示“未定义” .整个标题现在将是 Date: undefined GMT+2
而不是 Date: 2016-08-07 23:41:57 GMT+2
我错了什么?有人可以向我解释“tooltipItems”对象内容的两个输出之间的区别以及如何读取“xLabel”和“yLabel”索引吗?
最佳答案
我也遇到了类似的问题,不过已经解决了。
return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';
关于javascript - 图表.js 2.0 : How to change title of tooltip,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38819171/