Удаление легенды на диаграммах с помощью chart.js v2

109

Я делаю домашнюю страницу, используя Bootstrap, JQuery и Chart.js (v2). Моя реализация работала с использованием v1, но недавно я только что зашел в Bower и загрузил v2, используя это.

Я делаю сетку из 4 столбцов, каждая из которых содержит круговую диаграмму, однако масштабирование в версии 2 немного сбивает меня с толку. Я хочу, чтобы диаграммы были отзывчивыми, чтобы они правильно масштабировались с небольшими устройствами, такими как планшеты и смартфоны, и одна из моих проблем - избавиться от легенды диаграмм, а также информации о наведении курсора при наведении курсора мыши на разделы моего диаграмма.

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

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

Есть ли у кого-нибудь идеи, как убрать легенду, и описание зависания? Я просто не могу понять, как это используется

Я возьму в руки jsfiddle, как только у меня будет время!

РЕДАКТИРОВАТЬ: ссылка на документы: https://nnnick.github.io/Chart.js/docs-v2/#getting-started

javascript jquery css charts chart.js2 Зелиакс
источник

Ответы:

258

Объект параметров может быть добавлен к диаграмме при создании нового объекта диаграммы.

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});
ЯркийИнтелСумерки
источник
1
Большое спасибо, я использовал React, и этот hwo нужно сделать в режиме React .. <Donut data = {data} options = {{legend: false}} />
Ньютон Шейх
43

Вы можете изменить параметры по умолчанию, используя Chart.defaults.globalв вашем файле javascript. Итак, вы хотите изменить легенду и параметры всплывающей подсказки.

Удалить легенду

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

Удалить подсказку

Chart.defaults.global.tooltips.enabled = false;

Вот и рабочий скрипач.

сын
источник
Прохладно. Я не знал, как использовать эти функции, так как не знал, что могу просто написать эти команды в своем Javascript.
Zeliax
1

Вам просто нужно добавить эту легенду строки: {display: false}

Флот
источник
6
Чем этот ответ отличается от других ответов?
Shanteshwar Inde