正如标题所解释的，我试图使用chart.js创建一个报告，以给用户一个他们在系统中搜索的数据的图形表示，我目前能够让数据显示在画布上.
我已经从系统后端以JSON格式提供给JS函数的数据.我有主要的数据，正在构建饼图，与其他数据需要添加到工具提示，以给出关于该数据点的进一步解释.
我该如何go 做这一点，因为网上寻找没有给任何可行的结果，已经工作？
我附上了一个简化版本的代码与数据显示它是如何在系统中产生的.
var ctx = document.getElementById('myChart').getContext('2d');
var data = {
title: "Booking duration between 01/08/2023 and 29/03/2024",
labels: ["0 - 6 days", "7 - 13 days", "14 - 20 days", "21 - 27 days", "28 - 34 days"],
datasets: [{
data: [2126, 430, 51, 20, 44],
backgroundColor: ["#82B6EB", "#434348", "#94EE7E", "#F3A15E", "#8385E8"],
datalabels: ["79.6 %", "16.1 %", "1.91 %", "0.75 %", "1.65 %"],
databooking: ["( 2126 bookings)", "( 430 bookings)", "( 51 bookings)", "( 20 bookings)", "( 44 bookings)"],
hoverOffset: 20
}]
};
var myChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, chartData) {
var dataset = chartData.datasets[tooltipItem.datasetIndex];
var currentValue = dataset.data[tooltipItem.index];
var dataLabel = dataset.datalabels[tooltipItem.index];
var dataBooking = dataset.databooking[tooltipItem.index];
return 'Value: ' + currentValue + ' ' + dataLabel + ' ' + dataBooking;
},
title: function(tooltipItems, data) {
return data.title;
}
}
}
}
});<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
<div id="_Chart">
<canvas id="myChart" style="width:1700px; max-height: 550px;"></canvas>
</div>