Chart.js - 在不使用工具提示的情况下将文本/标签添加到气泡图元素中？

Question

问题

有没有办法在Chart.js气泡图表中为各个气泡添加标签，而无需始终显示工具提示？

背景

图表数据用于可视化我们的项目积压。有关每个项目的其他详细信息，即项目名称，都在表格中。

我们之前使用的是谷歌图表，只是在泡泡表中包含了行号，因此您可以匹配。

使用Chart.js我只得到气泡和工具提示。

我已经回顾了以下相关问题，但他们建议的解决方案要求始终显示工具提示。我在工具提示中获得了更多信息，并且一直显示它们会使图表显着混乱。

• Can individual bubbles in a chartjs bubble chart have labels?
• How to show tooltips always on Chart.js 2

Answer 1

Chart.js不直接支持这一点，但是Evert Timberg在提供示例Chart.js插件时非常有帮助。

来自Chart.js Data Labeling Example

// Define a plugin to provide data labels
Chart.plugins.register({
  afterDatasetsDraw: function(chartInstance, easing) {
    // To only draw at the end of animation, check for easing === 1
    var ctx = chartInstance.chart.ctx;
    chartInstance.data.datasets.forEach(function (dataset, i) {
      var meta = chartInstance.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          // Draw the text in black, with the specified font
          ctx.fillStyle = 'rgb(0, 0, 0)';
          var fontSize = 16;
          var fontStyle = 'normal';
          var fontFamily = 'Helvetica Neue';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
          // Just naively convert to string for now
          // <---- ADJUST TO DESIRED TEXT --->
          var dataString = dataset.data[index].toString();
          // Make sure alignment settings are correct
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          var padding = 5;
          var position = element.tooltipPosition();
          ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
        });
      }
    });
  }
});

例如，如果我只是传入“＃22”作为要渲染的文本，我们就会得到这个。