这是我在每个数据点上放置不同工具提示的代码。我想在每个数据点上放置不同的月份,但是所有的月份都打印在一起。我该如何将它们分开呢?
function trendsChart(labels1, datasets1, chartId) {
var ctx =
document.getElementById(chartId).getContext('2d');
var MONTHS = ["January", "February", "March", "April", "May", "June"];
console.log(datasets1)
var data = {
labels: labels1,
datasets: datasets1,
};
// Tooltip
const titleTooltip = (tooltipItems) => {
let sum = 77;
MONTHS.forEach(function(tooltipItem) {
sum = tooltipItem;
})
return sum;
}
var randomScalingFactor = function() {
return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
};
var line1 = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];
myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
x: {
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 0,
fontColor: "#9a9a9a"
},
title: {
display: true,
text: 'Week Of'
}
},
y: {
barPercentage: 1.6,
gridLines: {
drawBorder: false,
color: 'rgba(225,78,202,0.1)',
zeroLineColor: "transparent",
},
ticks: {
padding: 0,
fontColor: "#9a9a9a"
},
stacked: false,
title: {
display: true,
text: 'Count'
}
}
},
plugins: {
tooltip: {
//yAlign: 'bottom',
callbacks: {
title: titleTooltip,
}
}
}
}
});
return myChart;
}
1条答案
按热度按时间a1o7rhls1#
在粘贴代码的
titleTooltip
中,您用MONTHS
中的最后一个条目替换sum
。然而,图片中的工具提示建议,在真实的代码中,您用77
和MONTHS
中的所有条目创建一个数组,然后可能返回'Sum: ' + sum
,这将导致工具提示中显示的字符串。为了在单独的一行中查看所有月份,您可以按如下所示更改代码,并将
sum
作为array
返回:生成的工具提示仍然没有多大意义,但您会在不同的行上看到所有月份。因此,您需要扩展函数
titleTooltip
以获得所需的结果。请看一下你修改过的代码,看看它是如何工作的。
第一个