请原谅我有时英语不好。荷兰语是我的母语。
我创建了一个Chart.js折线图，显示了我的主电源智能电表报告的能源使用情况。我几乎按照我想要的方式工作，但有一件事我无法按我想要的方法工作，因为我一点都不懂。
在"Chart.js V2：为工具提示标签添加前缀或后缀"主题的用户"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';
}
}
随着用户"Lukman"在主题"打印JavaScript对象的内容？[重复]"的回答，我发现我可以显示"tooltipItems对象"的内容：
alert(tooltipItems.toSource())
这显示了"标题"answers"标签"之间关于"tooltipItems"对象的有趣差异。
"标签"处的"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读取，因为它显示我"未定义"。现在整个标题将是Date: undefined GMT+2而不是Date: 2016-08-07 23:41:57 GMT+2
我做错了什么？有人能解释一下"tooltipItems"的对象内容的两个输出之间的区别，以及如何读取"xLabel"answers"yLabel"索引吗？
我也遇到了类似的问题，但解决了这个问题。
return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';
我需要操作标题工具提示，并解决了它。查看v3.7.1的源chart.js，找到标题的回调，第11759:行
callbacks: {
title(tooltipItems) {
if(tooltipItems.length > 0) {
const item = tooltipItems[0];
const labels = item.chart.data.labels;
const labelCount = labels ? labels.length : 0;
if (this && this.options && this.options.mode === 'dataset') {
return item.dataset.label || '';
} else if (item.label) {
return item.label;
} else if (labelCount > 0 && item.dataIndex < labelCount) {
return labels[item.dataIndex];
}
}
return '';
}
}
在我的工具提示案例中，使用"；item.label"；回来实际上，复制并粘贴代码，效果很好，在我的情况下，需要在返回标题上进行一些文本剪切。
对不起，在谷歌翻译的帮助下。