How to show tooltips always on Chart.js 2

后端 未结 2 623
萌比男神i
萌比男神i 2020-12-03 13:12

How can I show tooltips always using Chart.js version 2 (alpha)?

I have tried this Chart.js - Doughnut show tooltips always?, but seems that this have changed in thi

2条回答
  •  时光取名叫无心
    2020-12-03 13:51

    You need to loop through the datasets and point and create tooltips in onAnimationComplete (setting the events array to an empty array won't work).

    Just like before you have to remove the events from the events array so that the tooltips don't disappear once you mouseover and mouseout, but in this case you need to set events to false.

    Also, I think the version in dev when I last checked had a problem with onAnimationComplete not triggering unless the animation duration was 0.

    Here is the relevant code

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

    Fiddle - https://jsfiddle.net/c8Lk2381/


    enter image description here

提交回复
热议问题