我想将numberValue
的值显示为条形图上悬停时的标签。我已经尝试了很多方法来做到这一点,但没有出现在悬停在酒吧。下面是代码:
getBarChart() {
this.http.get(API).subscribe({
next: (data) => {
this.totalAmount= data;
let splitted = this.totalAmount.toString().split(",");
let numberValue= splitted[0];
let totalAmountPerMonth = splitted[1];
let month = splitted[2];
this.barChart.data.labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
let dataValues = new Array(12).fill(null);
let monthIndex = parseInt(month) - 1;
dataValues[monthIndex] = totalAmountPerMonth;
this.barChart.data.datasets = [
{
label: "Total Amount",
data: dataValues,
backgroundColor: DARK_BLUE
}
];
this.barChart.update();
},
error: (err) => {
console.log(err);
}
});
Chart.register(BarController);
Chart.register(CategoryScale);
Chart.register(LinearScale);
Chart.register(BarElement);
this.barChart = new Chart("barChart", {
type: 'bar',
data: {
labels: [],
datasets: []
},
options: {
aspectRatio: 2.5,
scales: {
x: {
title: {
display: true,
text: "Month"
}
},
y: {
title: {
display: true,
text: "Total Amount"
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
callbacks: {
label: (context) => {
const value = context.dataset.data[context.dataIndex];
const numberValue = value !== null ? value : 'N/A';
return `Number: ${numberValue}`;
}
}
}
},
}
});
}
1条答案
按热度按时间0sgqnhkj1#
您需要导入并注册
Tooltip
以使其显示