如何始终在 Chart.js 2 上显示工具提示答案

【问题标题】：How to show tooltips always on Chart.js 2如何始终在 Chart.js 2 上显示工具提示
【发布时间】：2015-09-23 08:23:39
【问题描述】：

如何始终使用 Chart.js 版本 2 (alpha) 显示工具提示？

我已经尝试过这个Chart.js - Doughnut show tooltips always?，但似乎在最后一个版本中这已经改变了。

【问题讨论】：

你最终做了什么？以下任何答案是否可以解决您的问题？如果是这样，你可以接受那个。如果没有，我猜你可以提供自己的答案。

标签： javascript canvas charts chart.js

【解决方案1】：

您需要遍历数据集并在onAnimationComplete 中指向和创建工具提示（将事件数组设置为空数组将不起作用）。

就像之前必须从事件数组中删除事件一样，以便在鼠标悬停和鼠标移出时工具提示不会消失，但在这种情况下，您需要将 events 设置为 false。

另外，我认为我上次检查时 dev 中的版本存在 onAnimationComplete 不触发的问题，除非 animation duration 是 0。

这里是相关代码

var config = {
    type: 'pie',
    options: {
        events: false,
        animation: {
            duration: 0
        },
        onAnimationComplete: function () {
            var self = this;

            var elementsArray = [];
            Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                Chart.helpers.each(dataset.metaData, function (element, index) {
                    var tooltip = new Chart.Tooltip({
                        _chart: self.chart,
                        _data: self.data,
                        _options: self.options,
                        _active: [element]
                    }, self);

                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    },

小提琴 - https://jsfiddle.net/c8Lk2381/

【讨论】：

谢谢！我得到 Uncaught TypeError: Cannot read property 'chartArea' of undefined 并且必须添加 .. Chart.Tooltip({_chartInstance: self, ... 才能使其正常工作。回调也必须设置为options.animation.onComplete。使用分支 v2.0-dev 5.3.2016
先生。 Peelings，我无法在 Chart.js 的当前稳定版本中完成这项工作。您是否知道需要进行哪些更改？这里有一个...相关问题：stackoverflow.com/questions/38465624/chartjs-labels-and-legend。还有我的一个相关问题：stackoverflow.com/questions/37685285/…。任何帮助将不胜感激！
@xnakos - 查看github.com/chartjs/Chart.js/issues/1861 获取饼图。我认为 GitHub 也有用于 line 和 bar 的。
感谢您的出色回复！它似乎适用于各种图表。由于这是您的代码，也许您可以继续发布一些答案。这是基于您的代码的折线图的快速小提琴：jsfiddle.net/y0ujvnbj（Chart.js 2.1.6）。摇滚吧！
jsfiddle.net/tk31rehf/10（来自 etimberg 在github.com/chartjs/Chart.js/issues/1861 中的评论）

【解决方案2】：

这对我有用：

 events: [],
    animation: {
        duration: 0,
        onComplete:function () {
            var self = this;
            var elementsArray = [];
            Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                Chart.helpers.each(dataset.metaData, function (element, index) {
                    var tooltip = new Chart.Tooltip({
                        _chartInstance: self,
                        _chart: self.chart,
                        _data: self.data,
                        _options: self.options,
                        _active: [element]
                    }, self);
                    tooltip.update();
                    tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                }, self);
            }, self);
        }
    }

【讨论】：

嗨！是否有可能提供一个最小的工作 jsfiddle？