Как отключить всплывающую подсказку Chart JS, когда нет значения?

Я использую Chart JS v.1.0.2. Когда у меня есть одна строка и недостающие данные, во всплывающей подсказке отображается метка x.

Кто-нибудь знает, как отключить всплывающую подсказку, когда значение точки равно нулю?

Большое спасибо!


person greenTea2Codes    schedule 25.08.2015    source источник


Ответы (4)


Используя chart.js 2.3.0 и angular-chart.js 1.1.1, я решил проблему глобально, разрешив поставщика ChartJsProvider в моей функции angular.module('shared').config(...) и указав пользовательский обратный вызов label для параметра tooltips:

        ChartJsProvider.setOptions({
            tooltips: {
                enabled: true,
                //mode: 'single',
                callbacks: {
                    label: function (tooltipItem, data) {
                        const tooltip = data.datasets[tooltipItem.datasetIndex];
                        const value = tooltip.data[tooltipItem.index];
                        return value === 0 ? null : tooltip.label + ': ' + value;
                    }
                }
            }
        });

При возврате значения null всплывающая подсказка не отображается для этого конкретного элемента tooltipItem.

Ссылка: Конфигурация всплывающей подсказки Chart.js

person Augusto Barreto    schedule 27.04.2017
comment
Спасибо! отличное решение! Но я бы изменил оператор return для этого: return (value === null || value === 0)? '' : tooltip.label + ': ' + value; - person rasputino; 16.07.2020

Если вы не возражаете против нескольких сообщений консоли, вы можете throw ошибиться, чтобы выйти из метода всплывающей подсказки для null значений, например так

var myLineChart = new Chart(ctx).Line(data, {
    tooltipTemplate: function (d) {
        if (d.value === null)
            throw '';
        else
            // else return the normal tooltip text
            return d.label + ': ' + d.value;
    }
});

Альтернативой может быть расширение диаграммы или написание собственной функции всплывающих подсказок.


Скрипт — http://jsfiddle.net/y4zunrx6/

person potatopeelings    schedule 25.08.2015
comment
Спасибо за ваш ответ. Я попробую. Между тем, я хотел бы спросить, как такому новичку, как я, научиться расширять диаграмму или настраивать всплывающие подсказки? Я не смог найти простой для понимания документации по плагину. - person greenTea2Codes; 26.08.2015
comment
Для настройки всплывающих подсказок в проекте GitHub есть несколько примеров файлов. например github.com/nnnick/Chart.js/blob/ мастер/образцы/. расширение легко, как только вы немного побалуетесь в этом. Просто выполните console.log объекта диаграммы, и вы получите четкое представление о том, какие атрибуты существуют, и он очень хорошо назван, так что вы получите четкое представление о том, что представляет собой каждое свойство. Следующим шагом будет просмотр различных расширений и просмотр кода библиотеки (он очень хорошо организован) - person potatopeelings; 26.08.2015
comment
Выброс неперехваченной ошибки - это ответ с наибольшим количеством голосов? Серьезно? - person Rohan Deshpande; 06.11.2016

Я хотел отключить всплывающую подсказку все время. Я использую версию 2.1.6, и я сделал это следующим образом:

var options = {
    tooltips : {
        enabled: false      
    }
};

Примечание. При этом всплывающая подсказка вообще не будет отображаться, используйте ее только тогда, когда вы хотите отключить отображение всплывающей подсказки.

person Prime_Coder    schedule 15.07.2016
comment
Это работает, но как отключить всплывающие подсказки для определенных баров? Например, у первого бара есть всплывающая подсказка, а у второго и третьего нет. - person akashrajkn; 19.08.2016
comment
@akashrajkn Для этой цели вместо параметров (как я использовал выше) вам нужно передать параметр для отдельного элемента и внутри каждого решить, включен ли параметр, чтобы он был истинным или ложным. - person Prime_Coder; 21.08.2016
comment
Это не отвечает на исходный вопрос. Откуда у него столько голосов в этом контексте? - person taystack; 09.05.2017
comment
Вот почему я добавил примечание ниже. Неважно, люди иногда находят это полезным для себя. - person Prime_Coder; 10.05.2017

Лучший подход — настроить шаблон всплывающей подсказки так, чтобы он не отображал данные:

tooltipTemplate: "<%if (label && value){%><%=label%>: <%= value %><%} else {%> No data <%}%>"
person Suraj Pai    schedule 22.04.2016
comment
где это сделать? в смысле какой файл? @Сурадж Пай - person ephemeral; 25.08.2017