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