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

Posted 2023-02-24

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

【英文标题】：Chart.js 2.0: How to change title of tooltip

【发布时间】：2016-12-13 15:16:20

【问题描述】：

请原谅我有时英语很差。荷兰语是我的母语。

我创建了一个 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://***.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://***.com/a/34855201/6660135
            //Return value for label
            return 'Usage: ' + tooltipItems.yLabel*1000 + ' watt';
    

随着用户“Lukman”在主题"Print content of javascript object? [duplicate]" 的回答，我发现我可以显示“tooltipItems 对象”的内容：

alert(tooltipItems.toSource())

这显示了关于“title”和“label”之间的“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 insteas of Date: 2016-08-07 23:41:57 GMT+2

我错过了什么？有人可以解释一下“tooltipItems”对象内容的两个输出之间的区别以及如何读取“xLabel”和“yLabel”索引吗？

【参考方案1】：

我也遇到过类似的问题，不过已经解决了。

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

【讨论】：

非常感谢！这确实解决了我的问题！ :-) 显然这些是不同的：(xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0) 是一个对象。我已经认识到这一点。 [xLabel:"2016-08-07 23:41:57", yLabel:0.261, index:70, datasetIndex:0] 表面上代表一个数组。我必须查找所需数据的地方是数组索引 0（零）。

这是因为某些字段，例如title，传递了toolTipItem 对象的数组；其他人，如label，被传递一个对象。您可以在此处的“参数”列中查看：chartjs.org/docs/latest/configuration/…