ChartJS 图表js 2.0:如何更改工具提示的标题

dzjeubhm  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(189)

请原谅我有时候英语不好,荷兰语是我的母语。
我创建了一个Chart.js线图,它显示了我的主电源智能电表报告的能源使用情况。我让它几乎按照我想要的方式工作,但有一件事我不能设法让它按照我想要的方式工作,因为我不明白一件小事。
在用户“iecs”的帮助下,我在主题"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';
    }
}

通过用户“Lukman”对主题"Print content of JavaScript object? [duplicate]"的回答,我发现我可以显示“tooltipItems对象”的内容:

alert(tooltipItems.toSource())

这显示了“title”和“label”之间关于“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}]

开始字符和结束字符不同。“label”的字符可以用tooltipItems.yLabel读取,但“title”的字符不能用tooltipItems.xLabel读取,因为它显示“undefined”。整个标题现在将是Date: undefined GMT+2而不是Date: 2016-08-07 23:41:57 GMT+2
我错过了什么?有人能解释一下“tooltipItems”的对象内容的两个输出之间的区别,以及如何读取“xLabel”和“yLabel”索引吗?

ulmd4ohb

ulmd4ohb1#

我也遇到了类似的问题,但用这个解决了。

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

kmb7vmvb2#

我需要操作title工具提示,并解决了它。查看v3.7.1的源代码chart.js,找到title的回调,第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”返回。实际上复制和粘贴代码和工程罚款,在我的情况下需要一些文本剪切,超过返回标题。
对不起,由英语,谷歌翻译的帮助.

相关问题