chart.js v2로 차트에서 범례 제거
저는 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
새 차트 개체를 만들 때 옵션 개체를 차트에 추가 할 수 있습니다.
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
Chart.defaults.globaljavascript 파일에서 를 사용하여 옵션을 변경할 수 있습니다 . 따라서 범례 및 도구 설명 옵션을 변경하려고합니다.
범례 제거
Chart.defaults.global.legend.display = false;
툴팁 제거
Chart.defaults.global.tooltips.enabled = false;
다음 작업 피들러입니다.
You simply need to add that line legend: { display: false }
참고URL : https://stackoverflow.com/questions/36749509/removing-legend-on-charts-with-chart-js-v2
'code' 카테고리의 다른 글
| nodejs의 싱글 톤 패턴-필요합니까? (0) | 2020.09.15 |
|---|---|
| 아직없는 경우 배열에 요소 추가 (0) | 2020.09.15 |
| TypeError : re.findall ()의 바이트 열류 객체에 문자열 패턴을 사용할 수 없습니다. (0) | 2020.09.14 |
| ! 0이 MSIL (Microsoft Intermediate Language)의 유형 인 이유는 무엇입니까? (0) | 2020.09.14 |
| CSS 필터 만 사용하여 검은 색을 특정 색상으로 변환하는 방법 (0) | 2020.09.14 |