图表。js2.0:如何更改工具提示的标题-Chart.js2.0:Howtochangetitleoftooltip

Forgive me for my sometimes poor English. Dutch is my native language.

请原谅我有时英语不好。荷兰语是我的母语。

I've created a Chart.js linechart which shows me my energy usage reported by my main power smart meter. I got it almost working like the way I want, but there is one thing I can't manage to get it to work in a way I want because I don't understand a little thing.

我创建了一个图表。js线图显示了我的主要电源智能表报告的能源使用情况。我让它以我想要的方式工作，但有一件事我没办法让它以我想要的方式工作，因为我一点都不懂。

With some help of the user "iecs" at the topic "Chart.js V2: Add prefix or suffix to tooltip label" I was able to change the label at the tooltip. It now shows nicely my desired prefix and suffix:

在用户“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';
        }
    }
}

When I try to add exactly the same code to modify the title I got undefined at the place where a date and time should be displayed:

当我试图添加完全相同的代码来修改标题时，我在显示日期和时间的地方没有定义:

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';
    }
}

With the answer of user "Lukman" at the topic "Print content of Javascript object? [duplicate]" I discovered that I can display the content of the "tooltipItems object":

用户“Lukman”在“打印Javascript对象的内容?”“我发现我可以显示“tooltipItems对象”的内容”:

alert(tooltipItems.toSource())

This displayed an interesting difference regarding the "tooltipItems" object between the "title" and the "label".

这显示了在“标题”和“标签”之间的“tooltipItems”对象的一个有趣的区别。

The "tooltipItems" object at the "label" display this as content:

“标签”上的“tooltipItems”对象将其显示为内容:

({xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0})

While the "tooltipItems" object at the "title" displays this as content:

而“标题”中的“tooltipItems”对象则显示为内容:

[{xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0}]

The beginning characters and ending characters are different. The one of "label" can be read with tooltipItems.yLabel but the one of "title" can't be read with tooltipItems.xLabel because it shows me "undefined". The whole title will now be Date: undefined GMT+2 insteas of Date: 2016-08-07 23:41:57 GMT+2

开始字符和结束字符是不同的。“标签”中的一个可以用工具提示符读取。但是“标题”中的“标题”不能用工具提示读。因为它显示的是“未定义的”。整个标题现在是日期:未定义的GMT+2，日期:2016-08-07 23:41:57 GMT+2

What did I mis? Can someone explain me the differences between the 2 outputs of the object contents of "tooltipItems" and how to read the "xLabel" and "yLabel" indexes?

管理什么?有人能解释一下“tooltipItems”的对象内容的两个输出和如何读取“xLabel”和“yLabel”索引之间的区别吗?

1 个解决方案

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