Chart js 条形图工具提示显示右侧条形的值

Question

我在我的角度应用程序中显示垂直条形图。我添加了工具提示来显示悬停时栏的值。有时悬停效果很好，但有时将鼠标悬停在一个栏上时，工具提示会显示在右侧的另一个栏上。

请帮助我如何解决这个问题。

我尝试使用图表选项属性，但没有任何帮助。

Answer 1

您可以尝试的一件事是调整条形之间的间距。如果它们太靠近，工具提示可能会变得混乱。

此外，检查您的图表库是否具有自定义工具提示定位的选项。您也许可以对其进行调整，以便工具提示始终显示在可预测的位置，例如条形上方或下方。

嘿，您是否考虑过更新您的图表库？有时，较新的版本会修复此类讨厌的错误。

如果所有其他方法都失败了，那么使用浏览器的开发人员工具深入研究代码可能会找出问题所在。您可能会发现一些 CSS 怪癖或冲突样式导致问题。

import { Component } from '@angular/core';
import { ChartOptions, ChartTooltipItem } from 'chart.js';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      xAxes: [{
        barPercentage: 0.5, // Adjust bar width
        categoryPercentage: 0.7, // Adjust space between bars
      }],
    },
    tooltips: {
      callbacks: {
        label(tooltipItem: ChartTooltipItem, data): string {
          let label = data.datasets[tooltipItem.datasetIndex].label || '';
          if (label) {
            label += ': ';
          }
          label += tooltipItem.yLabel;
          return label;
        }
      },
      position: 'average' // Customize tooltip positioning
    }
  };

  barChartLabels: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  barChartType = 'bar';
  barChartLegend = true;
  barChartPlugins = [];

  barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<div style="width: 400px; height: 300px;">
  <canvas baseChart
          [datasets]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [plugins]="barChartPlugins"
          [legend]="barChartLegend"
          [chartType]="barChartType">
  </canvas>
</div>