Chart.js-在不使用工具提示的情況下向氣泡圖元素添加文本/標簽？

Question

題

有什么方法可以向Chart.js氣泡圖中的各個氣泡添加標簽，而無需始終顯示工具提示？

背景

圖表數據用於可視化我們的項目積壓。 有關每個項目的其他詳細信息，即項目名稱，在表中。

我們以前使用過Google圖表，只是在氣泡表中包括了表格中的行號，因此您可以進行匹配。

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

我已經審查了以下相關問題，但是他們建議的解決方案要求始終顯示工具提示。 我在工具提示中提供了更多信息，並且始終顯示它們會嚴重干擾圖表。

• chartjs氣泡圖中的單個氣泡可以有標簽嗎？
• 如何始終在Chart.js 2上顯示工具提示

Answer 1

Chart.js不直接支持此功能，但是Evert Timberg在提供示例Chart.js插件方面確實非常有幫助。

從Chart.js數據標簽示例

// 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”作為要渲染的文本，我們將得到此結果。