如何在角度 ng2 图表中使用 Chart.Tooltip.positioners.cursor？答案

【问题标题】：How can I use Chart.Tooltip.positioners.cursor in angular ng2 chart?如何在角度 ng2 图表中使用 Chart.Tooltip.positioners.cursor？
【发布时间】：2020-10-14 20:04:18
【问题描述】：

https://stackblitz.com/edit/ng2-chart-example

这是 js 中的工作示例：https://jsfiddle.net/edicarlos10/35081nag/

我想在我的项目中使用此代码，但找不到，我该如何使用此代码。

工作示例是使用 chart.js 完成的，我想使用 ng2-charts 完成，您可以在工作示例中看到工具提示可在鼠标位置移动，我想在 Angular 项目中实现。

Chart.Tooltip.positioners.cursor = function(chartElements, coordinates) {
      return coordinates;
    };

【问题讨论】：

你能指定更多你想要的吗，因为我看不出你的代码和这个工作示例有什么区别？
@RobertGłowacki... 工作示例是使用 chart.js 完成的，我想使用 ng2-charts 完成，您可以在工作示例中看到工具提示可在鼠标位置移动，我想在 Angular 项目中实现。
当我看到您的工作示例时，当您将鼠标悬停在数据上时会有一个工具提示
是的，同样的事情，我在 Angular 项目中怎么做？
这是一个带有工具的工作示例stackblitz.com/edit/… 这是一个角度项目，如果你想关闭它们，第 40-42 行中有代码，你还想要什么？

标签： angular ng2-charts

【解决方案1】：

你需要从chart.js导入图表

import { Chart } from "chart.js";

那么你可以在构造函数中使用它

  constructor() {
    Chart.Tooltip.positioners.cursor = (chartElements, coordinates) => {
      return coordinates;
    };
  }

并将其放在名称为“光标”的选项中

lineChartOptions: any = {
    tooltips: {
      intersect: false,
      position: 'cursor',
      mode: 'index'
    }
  };

【讨论】：

谢谢@Matej，请您再帮忙，我确实剪切了轴标签，现在我想在仅将鼠标悬停在标签而不是图表条和线上时将完整标签显示为工具提示。