chart.js v2가 있는 차트에서 범례 제거
Bootstrap, JQuery, Chart.js(v2)를 이용하여 홈페이지를 만들고 있습니다.저는 v1을 사용하여 구현 작업을 수행했지만, 최근에 Bower에 들어가서 그것을 사용하여 v2를 다운로드했습니다.
저는 파이 차트가 포함된 4개의 열로 그리드를 만들고 있지만 v2의 스케일링은 작업을 시작하기에 다소 혼란스럽습니다.저는 차트가 태블릿이나 스마트폰과 같은 작은 장치에 맞게 적절하게 확장되도록 차트가 반응하기를 원하며, 제 문제 중 하나는 차트의 범례뿐만 아니라 마우스를 차트의 섹션 위에 올릴 때 호버 정보를 제거하는 것입니다.
색인.
<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-messages
chart.js 버전 2.x에서 이전 버전으로:
옵션 개체는 새 차트 개체가 생성될 때 차트에 추가할 수 있습니다.
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
chart.js 버전 3.x 이후 버전:
범례, 제목 및 도구 설명 네임스페이스가 옵션에서 다음으로 이동됩니다.options.plugins.
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
plugins: {
legend: {
display: false
},
}
}
});
다음을 사용하여 기본 옵션을 변경할 수 있습니다.Chart.defaults.global자바스크립트 파일에 있습니다.범례 및 도구 설명 옵션을 변경하려고 합니다.
범례 제거
Chart.defaults.global.legend.display = false;
도구 설명 제거
Chart.defaults.global.tooltips.enabled = false;
여기 일하는 바이올린 연주자가 있습니다.
Ishan의 답변 수정
만약 당신이 나처럼 반응을 사용한다면,
const data = {
...
}
const options = {
plugins: {
legend: {
display: false,
},
},
};
<Bar data={data} options={options} />
나에게 이것은 효과가 없었습니다.
범례: {display: false}
하지만 이것은 아주 잘 작동합니다, 감사합니다.
플러그인: { 범례: {display: false, }, }
해당 줄 범례를 추가하기만 하면 됩니다. {display: false}
chartjs 버전 2.x를 사용하는 경우 다음을 간단히 추가합니다.
legend: {
display: false,
},
그러나 chart.js 버전 3.x 이상을 사용하는 경우 이러한 모든 속성이 요소로 이동되었으므로 여기에 추가하면 됩니다.
elements: {
line: {
borderWidth: 0.4,
},
point: {
radius: 0,
hitRadius: 10,
hoverRadius: 4,
hoverBorderWidth: 3,
},
legend: {
display: false,
}
},
언급URL : https://stackoverflow.com/questions/36749509/removing-legend-on-charts-with-chart-js-v2
'programing' 카테고리의 다른 글
| SQL Server에서 교착 상태를 시뮬레이션하는 방법은 무엇입니까? (0) | 2023.08.13 |
|---|---|
| 각도 2에서 편집 가능한 div의 콘텐츠에서 [(ngModel)]을 사용하는 방법은? (0) | 2023.08.13 |
| 원격 클라이언트에서 Mariadb를 연결할 수 없습니다. (0) | 2023.08.08 |
| Galera 노드가 클러스터에 연결할 수 없음 (0) | 2023.08.08 |
| C++ 지정 이니셜라이저와 동등합니까? (0) | 2023.08.08 |