Я створюю домашню сторінку за допомогою Bootstrap, JQuery та Chart.js (v2). У мене реалізація працювала за допомогою v1, але нещодавно просто потрапила в Bower і завантажила v2 за допомогою цього.
Я роблю сітку з 4 стовпців, кожна з яких містить кругову діаграму, однак масштабування в v2 - це щось заплутане для роботи. Я хочу, щоб графіки відповідали таким чином, щоб вони належним чином масштабувались із меншими пристроями, такими як планшети та смартфони, і одна з моїх проблем - це позбавлення від легенди діаграм, а також інформації, що наводиться, коли наводиться миша на розділи мого діаграма
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>
function.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, як тільки отримаю час!
EDIT: Посилання на документи: https://nnnick.github.io/Chart.js/docs-v2/#getting-started