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

是否有一个选项可以创建自定义工具提示，其中ChartJS以角度显示，左侧显示自定义图标，右侧显示一些数据参数（50%50%witdh）。我见过一些想法，但没有一个包含图片。谢谢大家!

Chart.js提供了可使用您选择的任何HTML构建的“”：

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

下面提供了多个示例：

以下是一个使用文档中的代码在工具提示中加载图像的快速示例：

constToolTip=document.getElementById（“tooltip”）；
新图表（document.getElementById（“图表”）{
输入：“酒吧”，
数据：{
标签：[“A”、“B”、“C”]，
数据集：[{
标签：“系列1”，
数据：[1,4,2]
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
启用：false，
自定义：函数（ToolTimpodel）{
//如果没有工具提示，则隐藏
如果（ToolTimpodel.opacity==0）{
tooltip.style.opacity=0；
返回；
}
//显示工具提示。
tooltip.style.opacity=1；
//创建img元素并将其附加到tooltip元素。
const img=document.createElement（'img'）；
img.src=”https://www.gravatar.com/avatar/6fcc51ca5e7029116a383e7aeb0bbaa0?s=32&d=identicon&r=PG&f=1";
tooltip.innerHTML=“”；
工具提示。追加子对象（img）；
//将工具提示移动到“正确”位置。
const position=this.\u chart.canvas.getBoundingClientRect（）；
tooltip.style.left=position.left+window.pageXOffset+tooltipModel.caretX+'px'；
tooltip.style.top=position.top+window.pageYOffset+tooltipModel.caretY+'px'；
}
}
}
});
#工具提示{
不透明度：0；
位置：绝对位置；
}

Chart.js为“”提供了可使用您选择的任何HTML构建的功能：

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

下面提供了多个示例：






以下是一个使用文档中的代码在工具提示中加载图像的快速示例：


constToolTip=document.getElementById（“tooltip”）；
新图表（document.getElementById（“图表”）{
输入：“酒吧”，
数据：{
标签：[“A”、“B”、“C”]，
数据集：[{
标签：“系列1”，
数据：[1,4,2]
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
},
工具提示：{
启用：false，
自定义：函数（ToolTimpodel）{
//如果没有工具提示，则隐藏
如果（ToolTimpodel.opacity==0）{
tooltip.style.opacity=0；
返回；
}
//显示工具提示。
tooltip.style.opacity=1；
//创建img元素并将其附加到tooltip元素。
const img=document.createElement（'img'）；
img.src=”https://www.gravatar.com/avatar/6fcc51ca5e7029116a383e7aeb0bbaa0?s=32&d=identicon&r=PG&f=1";
tooltip.innerHTML=“”；
工具提示。追加子对象（img）；
//将工具提示移动到“正确”位置。
const position=this.\u chart.canvas.getBoundingClientRect（）；
tooltip.style.left=position.left+window.pageXOffset+tooltipModel.caretX+'px'；
tooltip.style.top=position.top+window.pageYOffset+tooltipModel.caretY+'px'；
}
}
}
});
#工具提示{
不透明度：0；
位置：绝对位置；
}
这不是一个完整的答案，而是让你开始的东西

可以使用渲染器创建自定义工具提示。您也可以像下面一样使用文档，但它可能无法用于服务器端生成的应用程序

thisastat
是一个很好的实用函数=>它允许您将Chart.js对象引用为
that
，并允许您将类引用为
this

在我提供的链接的页面底部，它显示了如何制作自定义工具提示。慢慢来，慢慢来。基本上，无论他们在哪里使用
文档
，都可以使用
渲染器
。要定位和设置工具提示的样式，这取决于您，您可能需要进行计算

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);
   })
  }
}


这不是一个完整的答案，而是让你开始的东西

可以使用渲染器创建自定义工具提示。您也可以像下面一样使用文档，但它可能无法用于服务器端生成的应用程序

thisastat
是一个很好的实用函数=>它允许您将Chart.js对象引用为
that
，并允许您将类引用为
this

在我提供的链接的页面底部，它显示了如何制作自定义工具提示。慢慢来，慢慢来。基本上，无论他们在哪里使用
文档
，都可以使用
渲染器
。要定位和设置工具提示的样式，这取决于您，您可能需要进行计算

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);
   })
  }
}


我已经看过了，但是我找不到一个处理图像的例子。无论如何，谢谢你的回答。我已经看过了，但是我找不到一个处理图像的例子。不管怎样，谢谢你的回答。谢谢你，这真是我要找的案子！：）非常感谢！谢谢，这真是我要找的案子！：）非常感谢！