저는 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>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