Я делаю домашнюю страницу, используя 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