angularjs - 如何更改 Angular Chart.js 上的工具提示

Question

所以，我使用 angular-chart-js ionic 应用程序上的插件(不确定是否相关)。

使用线性图表，默认情况下，当单击一个点时，我会得到一个工具提示，如下所示:


我想改变那个工具提示的内部，我在谷歌上找不到任何东西。

任何帮助表示赞赏

Answer 1

好吧，我需要更改我的工具提示，以使它们具有各自标签的相同内容，但有一个细节:即使标签隐藏在图表中，也要做到这一点。像这样:



上图显示了一个图表 时间 x 值(value) 其中时间间隔为 20 分钟。也就是说，我希望工具提示具有它们各自的标签值(例如:在图像上，我将鼠标放在与时间 18:10 对应的值，间隔的一半)。

我需要做的就是:

1.在我的类中创建一个静态数组(懒惰的方式使它更容易访问)

public static arrayTooltip = [];

2.初始化它并用标签的正确值填充它

3. 我隐藏了我想隐藏的标签(不用担心...由于第 2 步，数据是安全的)

然后，在图表选项中，我做了这样的事情:

tooltips: {
    enabled: true, 
    displayColors: false,
    xPadding: 15,
    yPadding: 15,

    callbacks: {
        title: function(tooltipItem, data) {
            return "";
        },

        label: function(tooltipItem, data) {
            return MyClassComponent.arrayTooltip[tooltipItem.index]
        }
    }

  },

在上面的代码中，将注意力集中在回调上。我不想要标题，所以我把它留空了。关于标签，我获取了当前工具提示的索引(鼠标指向的那个)并在静态数组中使用它。它已经完成了。