异步加载 Chart.js 工具提示信息

Question

我知道我们可以使用以下代码加载图表工具提示的信息：

window.myLine = new Chart(chart, {
  type: 'line',
  data: lineChartData,
  options: {
    tooltips: {
      enabled: true,
      mode: 'single',
      callbacks: {
        label: function(tooltipItems, data) {
          return tooltipItems.yLabel + ' €';
        }
      }
    },
  }
});

问题是，在我的情况下，我需要调用一个函数并异步返回值；可能会显示一个微调器，直到响应准备好。我怎样才能做到这一点？

Answer 1

您可以异步调用 Chart.js update()方法。如果标签应取决于用户悬停的数据点，您可能还想使用递归。

\n\n

window.myLine = new Chart(chart, {\n  type: 'line',\n  data: lineChartData,\n  options: {\n    tooltips: {\n      enabled: true,\n      mode: 'single',\n      callbacks: {\n        label: asyncTooltipLabel\n      }\n    },\n  }\n});\n\nfunction asyncTooltipLabel(tooltipItems, data) {\n  // some asynchronous function call\n  setTimeout(function() {\n    // when asyncronous result comes\n    const result = (tooltipItems[0].index * 2) + ' \xe2\x82\xac';\n\n    const newTooltipConfig = {\n       enabled: true,\n       mode: 'single',\n       callbacks: {\n           label: function(newTooltipItems, newData) {\n              if (newTooltipItems[0].index === tooltipItems[0].index && newTooltipItems[0].datasetIndex === tooltipItems[0].datasetIndex) return result;\n              else asyncTooltipLabel(newTooltipItems, newData);\n           }\n       }\n    }\n\n    // apply new tooltip config\n    window.myLine.options.tooltips = newTooltipConfig;\n    window.myLine.update();\n  }, 2000);\n}\n

\n