ng2-charts 自定义在条形图上悬停时显示的工具提示的数据和整个 html 内容

Question

我正在将 valor 软件中的 ng2 图表与我的 angular 2 应用程序一起使用。我无法弄清楚如何自定义将鼠标悬停在条形图上时显示的默认工具提示的整个 html 内容。

有任何想法吗？

更新：

这是我的 html/标记代码：

<canvas baseChart width="100" height="100" style="padding:24px; border:1px solid black;border-color:gray" 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="chartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

在我的打字稿类中，我实现了 barChartOptions 函数：

tooltips: {
    callbacks: {
        ...
        ...
}}

定制一些东西，但这似乎真的很有限。例如，我可以使用 label 属性更改标签等：

label: function(tooltipItem, data) {                
    return "customlabel";
}  

但是，我不知道如何添加其他标签。使用 ng2-charts，如果我有一个包含两个数据集的条形图，并将鼠标悬停在一个条形上，则它仅显示该条形的标签和数据，但不显示第二个数据集的第二个条形的数据。我想同时显示两者，但不知道如何为此添加额外的标签和数据。

Answer 1

基本上，您无法使用 css 将样式应用于画布图表。然而，chartJS 提供了一种将样式应用到工具提示的方法。请阅读更多工具提示定制

另请考虑此示例：内部图表选项tooltips: {backgroundColor: '#fff'}