chart.js 그래프에서 축 레이블을 날아 다니는 방법
개요
이것을
↓
이런
전제
이 그래프의 html은 다음과 같습니다.
graph.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
</head>
<body>
<div style="height: 500px; width: 500px;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 0,
y: 0
}, {
x: 25,
y: 50
}, {
x: 50,
y: 25
}],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255,99,132,1)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: 0,
max: 50,
stepSize: 1
}
}],
yAxes: [{
ticks: {
min: 0,
max: 50,
stepSize: 1
}
}]
}
}
});
</script>
</body>
</html>
방법
xAxes와 yAxes의 ticks에 callback을 설정합니다.
graph.html
(中略)
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
callback: function(value) {return ((value % 10) == 0)? value : ''},
min: 0,
max: 50,
stepSize: 1
}
}],
yAxes: [{
ticks: {
callback: function(value) {return ((value % 10) == 0)? value : ''},
min: 0,
max: 50,
stepSize: 1
}
}]
}
}
(以下略)
이번 파일을 Gist에 둡니다 ↓
htps : // 기 st. 기주 b. 코 m / ky 치켄 / 8에 df90 아 8c6355cb에서 2555에 f65133419
이상
참고
htps : // 기주 b. 이 m/짱rtjs/짱rt. js/이스에 s/2121
h tp // w w. 찬 rtjs. 오 rg / cs /
(Tick Configuration 섹션)
Reference
이 문제에 관하여(chart.js 그래프에서 축 레이블을 날아 다니는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kytiken/items/6f22b538ef67b9ea6f1e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
