Chart.js 2.0:如何更改工具提示的标题

Question

原谅我有时候我的英语很差.荷兰语是我的母语.

我已经创建了一个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';
    }
}

在"打印JavaScript对象的内容？[重复]"主题的用户"Lukman"的回答中,我发现我可以显示"tooltipItems对象"的内容:

alert(tooltipItems.toSource())

这显示了关于"标题"和"标签"之间的"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}]

起始字符和结束字符不同.可以读取"标签"中tooltipItems.yLabel的一个,但是"标题"之一无法读取,tooltipItems.xLabel因为它显示"未定义".整个标题现在将成为Date: undefined GMT+2insteasDate: 2016-08-07 23:41:57 GMT+2

我错了什么？有人可以解释我的"tooltipItems"如何阅读"xLabel"和"yLabel"索引的对象内容的2个输出之间的差异？

Answer 1

我也遇到了类似的问题,但是已经解决了这个问题.

return 'Date: ' + tooltipItems[0].xLabel + ' GMT+2';