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

Javascript chart.js v2:如何添加元数据的工具提示?,javascript,charts,tooltip,chart.js,Javascript,Charts,Tooltip,Chart.js,我想为每个工具提示添加元数据 数据是 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月4日)时,将显示工具提示 'apr., 4°C \n spring

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

数据是

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月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',
                                });

                            } 

                        }
                    }
                };
var选项={
工具提示:{
启用:false,
回调:{
标签:函数(工具提示项、数据){
var myArr=[11,22,33,44,55]
var datasetLabel=data.datasets[tooltipItem.datasetIndex].label | |“”;
//这将是tooltip.body
返回datasetLabel+':'+tooltipItem.yLabel+':'+myArr[tooltipItem.index];
},
},
自定义:函数(工具提示){
var tooltipEl=$(“#chartjs工具提示”);
如果(!工具提示){
工具管道({
不透明度:0
});
返回;
}
if(tooltip.body的类型!=“未定义”){
var bodyText=tooltip.body[0]。拆分(“:”);
var innerHtml=''+工具提示.title[0]+'
' +''+bodyText[0].修剪()+'':''+bodyText[1].修剪()+'' +''+bodyText[2].修剪()+''; html(innerHtml); 工具管道({ 不透明度:1, 左:(tooltip.xPadding*3)+tooltip.x+'px', 顶部:(tooltip.yPadding*3)+tooltip.y+'px', }); } } } };