Chart.js v2 приховує мітки набору даних


106

У мене є такі коди, щоб створити графік за допомогою 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.

Як я можу видалити мітки набору даних?

Відповіді:


252

Просто встановіть параметри labelта tooltipтакі варіанти

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

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


працює як шарм, дякую. до речі, як змінити градієнтний колір лінійної діаграми?
Раптор

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

1
Що робити, якщо я хочу використовувати його на одному наборі даних, а не на іншому
Нік Олександр

Це працює! лише одне запитання, де ви знайшли всі ці варіанти?
fangzhzh

39

додати:

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

при запуску коду сценарію;


Простий і працює ідеально. Я помітив, що прийнята відповідь порушує деякі речі.
stickdeodorant

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

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


8

Це так само просто, як додати це: legend: { display: false, }

// Або, якщо ви хочете, ви можете використовувати цю іншу опцію, яка також повинна працювати:

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


Проста відповідь, не потрібно винаходити колесо.
ТНТ

параметри: {легенда: {display: false,}} Допомагає записати, у який блок поставити його (це в основному проблема з документацією)
Normajean

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.