chart.js v2:如何添加元数据的工具提示

chart.js v2: how to add tooltips of metadata?

本文关键字：添加元数据工具提示 v2 js 何添加 chart 更新时间：2023-09-26

我想为每个工具提示添加元数据。

数据是

x.label=['jan.', 'feb.','mar.','apr.','may','jun']
x.data=[-30,-24,-10,4,12,15]
x.metadata=['extrmely cold','exreme cold too','mostlry spring','spring has come!', 'sakura blooming' ,'hot!']

当我点击（四月，4），然后工具提示显示

'apr., 4°C 'n spring has come!'

如何编辑工具提示功能？

这对我很有用。我在tooltip.callbacks.label函数中创建了一个数组（myArr变量），并附加了返回值。我认为，如果你把x.metadata值放在myArr中，它就会成功。

var options = {
                    tooltips: {
                        enabled:false,
                        callbacks:{
                            label: function(tooltipItem, data) {
                                var myArr = [11,22,33,44,55]
                                var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                                //This will be the tooltip.body
                                return datasetLabel + ': ' + tooltipItem.yLabel +' :'+ myArr[tooltipItem.index];
                            },
                        },
                        custom: function(tooltip) {
                            var tooltipEl = $('#chartjs-tooltip');
                            if (!tooltip) {
                                tooltipEl.css({
                                    opacity: 0
                                });
                                return;
                            }
                            if (typeof  tooltip.body != 'undefined') {
                                var bodyText = tooltip.body[0].split(":");
                                var innerHtml = '<span class="chartjs-tooltip-header"><b>'+tooltip.title[0]+'</b></span><br>'
                                                +'<span>' + bodyText[0].trim() + '</span> : <span><b>' + bodyText[1].trim() +'</b></span>'
                                                +'<span>' + bodyText[2].trim() + '</span>';
                                tooltipEl.html(innerHtml);
                                tooltipEl.css({
                                    opacity: 1,
                                    left: (tooltip.xPadding * 3) + tooltip.x + 'px',
                                    top: (tooltip.yPadding * 3) + tooltip.y + 'px',
                                });
                            } 
                        }
                    }
                };