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

Question

是否可以使用ChartJS在Angular中创建自定义工具提示，该工具提示在左侧显示自定义图标，在右侧显示一些数据参数（50％50％witdh）。我看到了一些想法，但没有包含图像。谢谢！

Answer 1

这不是一个完整的答案，它可以帮助您入门。

您可以使用渲染器创建自定义工具提示。您也可以像在底部https://www.chartjs.org/docs/latest/configuration/tooltip.html一样使用该文档，但是它可能不适用于服务器端生成的应用程序。

thisAsThat是一个很好的实用函数=>它使您可以将Chart.js对象称为that，并允许将类称为this。

在我提供的链接的本页底部，它显示了如何制作自定义工具提示。花点时间来经历它。基本上他们在任何地方都使用document，您可以使用renderer。要定位和设置工具提示的样式，它取决于您，您可能需要进行计算。

constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}

private thisAsThat(callBack: Function) {
  const self = this;
  return function () {
      return callBack.apply(self, [this].concat(Array.prototype.slice.call(arguments)));
  }; 
}

options: {
  tooltips: {
    enabled: false,
    custom: this.thisAsThat((that, tooltipModel: any) => {
      // maybe you need chartPosition
      const chartPosition = that._chart.canvas.getBoundingClientRect();
      const tooltipEl = this.renderer.createElement('div');
      const image = this.renderer.createElement('img');
      // Pretty sure it is setProperty, can also give setAttribute a try as well
      this.renderer.setProperty(image, 'src', 'src of image here');
      this.renderer.setProperty(image, 'alt', 'Your alt');
      this.renderer.appendChild(tooltipEl, image);
      // Can also add a class as well.
      this.renderer.setStyle(tooltipEl, 'background', 'black');
      // this should add your tooltip at the end of the DOM right before the body tag
      this.renderer.appendChild(this.document.body, tooltipEl);
   })
  }
}

Answer 2

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>