angular - ChartJS - 带图标的自定义工具提示

Question

是否有一个选项可以在 Angular 中使用 ChartJS 创建自定义工具提示，它在左侧显示自定义图标，在右侧显示一些数据参数(50% 50% witdh)。我见过一些想法，但没有包含图像。谢谢!

Answer 1

Chart.js 提供“External (Custom) Tooltips”，可以使用您选择的任何 HTML 构建:

options: {
  tooltips: {
    // Disable the on-canvas tooltip
    enabled: false,
    custom: function(tooltipModel) {
      // your custom tooltip code ...

Chart.js samples page 上提供了多个示例:

• HTML tooltips (line)
• HTML tooltips (pie)
• HTML tooltips (points)

基于您的 comment ，这里是使用文档中的代码在工具提示中加载图像的快速示例:

const tooltip = document.getElementById("tooltip");

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    labels: ["A", "B", "C"],
    datasets: [{
      label: "Series 1",
      data: [1, 4, 2]
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    tooltips: {
      enabled: false,
      custom: function(tooltipModel) {
        // Hide if no tooltip
        if (tooltipModel.opacity === 0) {
          tooltip.style.opacity = 0;
          return;
        }

        // show the tooltip.
        tooltip.style.opacity = 1;

        // create the img element and append it to the tooltip element.
        const img = document.createElement('img');
        img.src = "https://www.gravatar.com/avatar/6fcc51ca5e7029116a383e7aeb0bbaa0?s=32&d=identicon&r=PG&f=1";
        tooltip.innerHTML = "";
        tooltip.appendChild(img);

        // move the tooltip to the 'correct' position.
        const position = this._chart.canvas.getBoundingClientRect();
        tooltip.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
        tooltip.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
      }
    }
  }
});

#tooltip {
  opacity: 0;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
<div id="tooltip"></div>