NG2-Charts自定义数据和工具提示的整个HTML内容时，在条形图上徘徊时会显示

Question

我正在使用我的Angular 2应用程序中使用Valor软件的NG2图表。我无法弄清楚如何自定义悬停在条形图上时显示的默认工具提示的整个HTML内容。

有什么想法？

更新：

这是我的html/markup代码：

<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: function(tooltipItem, data) {                
    return "customlabel";
}  

但是，我看不到如何添加其他标签。使用NG2-charts，如果我有一个带有两个数据集的条形图，并且在一个条上悬停，则仅显示该条的标签和数据，但是它不会显示第二个数据集第二个bar的数据。我想同时显示两者，但看不到如何为此添加其他标签和数据。

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

Answer 2

基本上，您不能使用CSS应用样式到画布图。但是，ChartJS提供了一种将样式应用于工具提示的方法。请通过Tooltip自定义阅读更多信息

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