尝试使用chart.js自定义混合图表的悬停工具提示时遇到了一些问题 .
我有一个条形图,显示某些产品的总利润和一个折线图,以显示该特定产品的总量 . 当我将鼠标悬停在条形图上时,我希望工具提示显示如下内容:
Total profit: $ 1399.30
价格应以两位十进制格式附加在“总利润:$”的背面 . 当我将鼠标悬停在折线图上时,我希望显示如下内容:
Quantity sold: 40 unit(s)
这是我填充相关数组的代码:
for(var i = 0 ; i < topProductList.length; i++){
labelData.push(topProductList[i].itemName);
amountData.push((topProductList[i].price * topProductList[i].quantity).toFixed(2));
quantityData.push(topProductList[i].quantity);
}
我试图按照@GRUNT的建议合并回x轴标签的回调:
tooltips: {
callbacks: {
title: function(t, d) {
return d.labels[t[0].index].replace(/\n/, ' ');
}
}
}
我的图表的选项:
var opt = {
type: "bar",
data: {
labels: labelData,
datasets: [{
type: "bar",
label: 'Total Profit ',
data: amountData,
},{
type: "line",
label: 'Quantity Sold ',
data: quantityData,
}]
},
options: options
};
现在,当我悬停我的条形图时,我得到 Total profit: 1399.3
并且对于折线图, Quantity sold: 40
这不是我想要的输出,如上所述 .
任何想法如何覆盖工具提示悬停定制?
谢谢!
1 回答
您可以使用以下工具提示的标签回调函数,以便在不同的图表上悬停时显示不同的工具提示标签:
另外,您的第一个数据集应该是
line
图表,然后是bar
,如下所示:ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩