홈>
ChartJS라이브러리를 사용하여 차트를 만들고 있습니다. 툴팁에서 내가 만든 데이터 세트의 데이터 값을 보여줍니다. 차트 유형이도넛인 경우 작동합니다. 그렇지 않으면 차트 나막대또는가로 막대차트에서 작동하지 않습니다.
내가 무엇을하든 레이블이있는 데이터가 표시됩니다.
툴팁에 데이터가 포함 된 JSFiddle of Donut Chart 작업.
<시간>툴팁에 레이블 + 데이터가있는 막대 차트의 JSFiddle 작업.
막 대형 차트의 툴팁에 표시된 레이블을 제거하기 만하면됩니다.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
"Men",
"Women",
"Unknown"
],
datasets: [{
label: 'Sweden',
data: [60, 40, 20],
backgroundColor: [
'rgba(158, 216, 202, 0.75)',
'rgba(255, 150, 162, 0.75)',
'rgba(160, 160, 160, 0.75)'
]
},
{
label: 'Netherlands',
data: [40, 70, 10],
backgroundColor: [
'rgba(158, 216, 202, 0.5)',
'rgba(255, 150, 162, 0.5)',
'rgba(160, 160, 160, 0.5)'
]
},
{
data: [33, 33, 34],
backgroundColor: [
'rgba(158, 216, 202, 0.25)',
'rgba(255, 150, 162, 0.25)',
'rgba(160, 160, 160, 0.25)'
]
}
]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
- 답변 # 1
관련 자료
- r - dataframe에서 각 "고유 레이블"의 최대 값을 얻는 방법
- javascript - amchart 4 - sunburst 드릴 다운 차트에서 텍스트 레이블을 래핑하는 방법은 무엇입니까? 이것에 라벨을 추가하는 방법
- javascript - 마지막으로 선택한 값을 제거하는 방법
- reactjs - antd 슬라이더 값 대신 레이블 텍스트를 얻는 방법
- CSS없이 HTML에서 입력과 레이블 사이의 갭을 제거하는 방법은 무엇입니까?
- python - 동일한 데이터 프레임 행의 부울 값을 기반으로 차트의 막대 색상
- python - 중복 행을 제거하고 열에서 가장 많이 사용되는 3 개 요소의 백분율 값을 얻는 방법은 무엇입니까?
- javascript - 변경된 선택 태그 뒤에 나타나는 선택 태그의 값을 제거하고 가져옵니다
- python - 값 임계 값을 기반으로 dict 요소를 필터링하고 제거하는 방법은 무엇입니까?
- swift - SwiftUI에서 바인딩 값을 사용하여 목록 섹션 추가 및 제거
- c# - checbox의 값을 대리자 (xamarinforms)별로 listview의 레이블로 전달
- node.js - 자바 스크립트의 마지막 배열 값에서 \ r 제거
- javascript - URLSearchParams를 사용하여 동일한 키로 여러 키 값 쌍 중 하나만 제거하는 방법은 무엇입니까?
- loops - 반복적으로 선택하고 R에서 선택한 값을 제거합니다
- python - 임의의 값을 생성 한 다음 pop 메서드를 사용하여 제거하려면 어떻게해야합니까?
- 자바 스크립트를 사용하여 다차원 배열에서 값이 0 인 경우 배열에서 요소를 제거하는 방법
- javascript - 선택 옵션에 따라 Alpine JS 변경 레이블/텍스트 상자 값
- r - 차트 외부에서 x/y 축 레이블 값을 지정하는 방법
- excel - 다른 열에 최대 값이있는 경우 "1"로 레이블이 중복됩니다
- vega lite - 다른 색상으로 원형 차트 내에 집계 된 합계 값을 표시하는 방법은 무엇입니까?
관련 질문
- javascript : 함수를 사용하여 chartjs로 여러 ajax 새로 고칠 수 있는 차트를 만드는 방법은 무엇입니까?
- jquery : Charts JS: 단위를 설정하는 방법?
- javascript : chart.js에서 레이블과 차트 영역 사이의 공간을 늘리는 방법
- reactjs : react-chartjs-2 React로 동적으로 유형 변경
- charts : Chart.js에서 Y축의 그리드 선 스타일을 어떻게 변경합니까?
- javascript : chartjs는 주와 일의 데이터를 출력합니다.
- javascript : chart.js 및 datalabels를 사용하여 꺾은 선형 차트를 그리는 방법이 표시되어야 합니다.
- javascript : Chartjs는 내 django 프로젝트에 차트를 표시하지 않습니다.
- javascript : Chart.js 프로그래밍 방식 및 범례 기반 데이터 세트 토글 결합
- jquery : chart.js 2.3은 원형 차트 데이터를 동적으로 로드합니다.
그냥
title
를 사용 빈 값을 가진 옵션. 이와 같이 :업데이트 된 jsfiddle 참조