我知道我们可以使用以下代码来加载图表工具提示的信息:
window.myLine = new Chart(chart, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: function(tooltipItems, data) {
return tooltipItems.yLabel + ' €';
}
}
},
}
});
问题是,就我而言,我需要调用一个函数并异步返回值;可能会显示微调框,直到响应准备就绪为止。我该怎么做?
您可以异步调用chart.js update()方法。如果标签应取决于用户悬停在哪个数据点上,则可能还需要使用递归。
window.myLine = new Chart(chart, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: asyncTooltipLabel
}
},
}
});
function asyncTooltipLabel(tooltipItems, data) {
// some asynchronous function call
setTimeout(function() {
// when asyncronous result comes
const result = (tooltipItems[0].index * 2) + ' €';
const newTooltipConfig = {
enabled: true,
mode: 'single',
callbacks: {
label: function(newTooltipItems, newData) {
if (newTooltipItems[0].index === tooltipItems[0].index && newTooltipItems[0].datasetIndex === tooltipItems[0].datasetIndex) return result;
else asyncTooltipLabel(newTooltipItems, newData);
}
}
}
// apply new tooltip config
window.myLine.options.tooltips = newTooltipConfig;
window.myLine.update();
}, 2000);
}