如何在Chart.js上显示工具提示2

Question

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

我试过这个Chart.js - Donut总是显示工具提示？,但似乎在最后一个版本中已经改变了.

Answer 1

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

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

另外，我认为我上次检查时开发中的版本存在 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/

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