Chart.js v2 скрыть метки наборов данных


107

У меня есть следующие коды для создания графика с использованием Chart.js v2.1.3:

var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: dates,
        datasets: [{
            label: 'I want to remove this Label',
            data: prices,
            pointRadius: 0,
            borderWidth: 1
        }]
    }
});

Коды выглядят просто, но я не могу удалить метку с графика. Я перепробовал множество решений, которые нашел в Интернете, но большинство из них используют Chart.js v1.x.

Как я могу удалить метки набора данных?

Ответы:


253

Просто установите labelи tooltipопции , как так

...
options: {
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
}

Fiddle - http://jsfiddle.net/g19220r6/


работает как шарм, спасибо. кстати, как изменить цвет градиента линейной диаграммы?
Raptor

1
Вы имеете в виду, как использовать градиент в качестве borderColor / backgroundColor. Просто создайте его в контексте и используйте его при инициализации - см. Jsfiddle.net/g9h6gtvx
potatopeelings

1
Что, если я захочу использовать его в одном наборе данных, но не в другом,
Ник Александр

Оно работает! только один вопрос, где вы все эти варианты нашли?
фангжж

39

Добавить:

Chart.defaults.global.legend.display = false;

в начале кода вашего скрипта;


Просто и отлично работает. Я заметил, что принятый ответ ломал некоторые вещи.
стик-дезодорант 07

9

Вы также можете поместить всплывающую подсказку в одну строку, удалив "заголовок":

this.chart = new Chart(ctx, {
    type: this.props.horizontal ? 'horizontalBar' : 'bar',
    options: {
        legend: {
            display: false,
        },
        tooltips: {
            callbacks: {
                label: tooltipItem => `${tooltipItem.yLabel}: ${tooltipItem.xLabel}`, 
                title: () => null,
            }
        },
    },
});

введите описание изображения здесь


9

Это так же просто, как добавить это: legend: { display: false, }

// Или, если хотите, вы можете использовать этот другой вариант, который также должен работать:

Chart.defaults.global.legend.display = false;


Простой ответ, не нужно изобретать велосипед.
TNT

options: {legend: {display: false,}} Это помогает написать, в какой блок его вставить (это в основном проблема с документацией)
Normajean

2
new Chart('idName', {
      type: 'typeChar',
      data: data,
      options: {
        legend: {
          display: false
        }
      }
    });

2
Привет, добро пожаловать в SO. рассмотрите возможность добавления краткого объяснения рядом с кодом
bagerard 04
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.