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

【问题标题】：ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chartng2-charts 自定义悬停在条形图上时显示的工具提示的数据和整个 html 内容
【发布时间】：2019-02-27 00:59:03
【问题描述】：

我在我的 Angular 2 应用程序中使用来自 valor 软件的 ng2 图表。我无法弄清楚如何自定义将鼠标悬停在条形图上时显示的默认工具提示的整个 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，如果我有一个包含两个数据集的条形图，并将鼠标悬停在一个条形上，则它仅显示该条形的标签和数据，但不显示第二个数据集的第二个条形的数据。我想同时显示两者，但不知道如何为此添加额外的标签和数据。

【问题讨论】：

如果更新到帖子中，您所做的任何代码
我遇到了一些较早的帖子，说这可以通过使用 multiTooltipTemplate 属性来实现。但是，我在当前的 Chart.js 文档中看不到这一点 chartjs.org/docs/#getting-started-global-chart-configuration 这不再受支持吗？如果没有，现在有什么替代方案？

标签： angular chart.js angular2-directives ng2-charts

【解决方案1】：

我成功完成了以下设置：

模板

<canvas
  baseChart
  [chartType]="chartSettings.lineChartType"
  [colors]="chartSettings.lineChartColors"
  [datasets]="lineChartData"
  [labels]="lineChartLabels"
  [legend]="chartSettings.lineChartLegend"
  [options]="chartSettings.lineChartOptions"   <---- the important one
>
</canvas>

还有我创建的文件stats.chart-settings.ts的设置：

export const ChartSettings: any = {
  lineChartOptions: {
    tooltips: {
      backgroundColor: 'rgba(255,255,255,0.9)',
      bodyFontColor: '#999',
      borderColor: '#999',
      borderWidth: 1,
      caretPadding: 15,
      colorBody: '#666',
      displayColors: false,
      enabled: true,
      intersect: true,
      mode: 'x',
      titleFontColor: '#999',
      titleMarginBottom: 10,
      xPadding: 15,
      yPadding: 15,
    }
  }
}

在组件中我只有：

import { ChartSettings } from './stats.chart-settings';

...

chartSettings: any;

constructor() {
  this.chartSettings = ChartSettings;
}

【讨论】：

问题是关于自定义“html 内容”。 tooltips 选项似乎不支持这一点。

【解决方案2】：

基本上，您不能将使用 css 的样式应用于画布图表。然而，chartJS 提供了一种将样式应用到工具提示的方法。请在Tooltip customisation阅读更多内容

还要考虑这个示例：图表内选项tooltips: {backgroundColor: '#fff'}

【讨论】：