针对混合图表的Chart.js工具提示悬停定制 [英] Chart.js tooltip hover customization for mixed chart
问题描述
在尝试使用chart.js定制混合图表的悬停工具提示时遇到了一些问题。
I was having some problem when trying to customize the hover tooltip for mixed chart using chart.js.
我有一个条形图,显示某些特定日期的总利润产品和折线图以显示该特定产品的总量。当我将鼠标悬停在条形图上时,我希望工具提示显示如下内容:
I have a bar chart which show the total profit for certain product and a line chart to show the total quantity of that certain product. When I hover over the bar chart, I wanted the tooltip to show something like:
Total profit: $ 1399.30
价格应为两位小数,并附加在总利润:$后面。当我将鼠标悬停在折线图上时,我想显示以下内容:
The price should be in two decimal format appended to the back of 'Total profit: $'. When I hover over the line chart, I wanted to show something like:
Quantity sold: 40 unit(s)
这是我的代码,用于填充相关数组:
Here is my code to populate related array:
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);
}
根据我的建议,我试图合并x轴标签的回调@GRUNT:
The callback where I tried to merge back the x-axis label as suggested by @GRUNT:
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
};
现在,当我将鼠标悬停在条形图上时,我将获得总利润:1399.3
,对于折线图,已售数量:40
这不是我上面想要的产量。
For now, when I hover my bar chart, I am getting Total profit: 1399.3
and for line chart, Quantity sold: 40
which is not my desired output as above.
有什么想法可以覆盖工具提示悬停自定义吗?
Any ideas how to override the tooltip hover customization?
谢谢!
推荐答案
您可以使用以下工具提示的标签回调函数,将鼠标悬停在不同的图形上时显示不同的工具提示标签:
You can use the following tooltip's label callback function, for showing different tooltip labels when hovered on different graphs :
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
另外,您的第一个数据集应对于线
图表,然后是 bar
,如下所示:
also, your first dataset should be for line
chart, followed by bar
, like so :
datasets: [{
type: "line",
label: 'Quantity Sold ',
data: quantityData
}, {
label: 'Total Profit ',
data: amountData
}]
ᴡᴏʀᴋɪɴɢxx⧩
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
type: "line",
label: 'Quantity Sold',
data: [40, 50, 60, 70, 80],
borderColor: 'orange',
fill: false
}, {
label: 'Total Profit',
data: [1399.3, 356.62, 1249, 465.23, 1480.4],
backgroundColor: 'rgba(0, 119, 220, 0.4)',
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
},
tooltips: {
callbacks: {
label: function(t, d) {
var xLabel = d.datasets[t.datasetIndex].label;
var yLabel = t.yLabel;
// if line chart
if (t.datasetIndex === 0) return xLabel + ': ' + yLabel + ' unit(s)';
// if bar chart
else if (t.datasetIndex === 1) return xLabel + ': $' + yLabel.toFixed(2);
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
这篇关于针对混合图表的Chart.js工具提示悬停定制的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!