Question

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

我已经创建了Chart.js线图，显示了我的主电源智能电表报告的能耗情况。我觉得它几乎像我想要的那样工作，但有一件事我无法以我想要的方式让它工作，因为我不了解一点。

在用户的帮助下＆＃34; iecs＆＃34;在主题"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';
    }
}

用户的答案＆＃34; Lukman＆＃34;在主题"Print content of JavaScript object? [duplicate]"我发现我可以显示＆＃34; tooltipItems对象的内容＆＃34;：

alert(tooltipItems.toSource())

这显示了＆＃34; tooltipItems＆＃34; ＆＃34;标题＆＃34;之间的对象和＃34;标签＆＃34;。

＆＃34; tooltipItems＆＃34;对象在＆＃34;标签＆＃34;将其显示为内容：

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

而＆＃34; tooltipItems＆＃34;对象在＆＃34;标题＆＃34;将其显示为内容：

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

开头字符和结尾字符不同。＆＃34;标签＆＃34;可以使用tooltipItems.yLabel来阅读，但是＃34; title＆＃34;无法使用tooltipItems.xLabel阅读，因为它显示我＆＃34;未定义＆＃34;。整个标题现在是Date: undefined GMT+2

的Date: 2016-08-07 23:41:57 GMT+2个词组

我错了什么？有人可以解释一下＆＃34; tooltipItems＆＃34;的对象内容的2个输出之间的差异。以及如何阅读＆＃34; xLabel＆＃34;和＆＃34; yLabel＆＃34;索引？

Answer 1

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

<img class="border" src="{media:thumbnail/@url}" alt="Instagram" />

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

1 个答案: