Chart.js로 가로 스크롤 가능한 그래프 만들기
개요
Chart.js에서는 보통 그래프를 만들면 화면의 폭에 맞추어 1개의 데이터당의 사이즈를 반응형으로 조정해 표시해 줍니다.
매우 편리하지만 데이터의 양이 많으면 꽤 보기 어려워집니다.
그래서 데이터 1개당의 가로폭을 고정해 화면에 들어갈 수 없는 분은 가로 스크롤로 보이도록(듯이) 하려고 생각했습니다만, 꽤 고생했기 때문에 메모를 남깁니다. 도움이되면 다행입니다.
완성도
이번에는 막대 그래프가 필요했기 때문에 막대 그래프를 만들었습니다.
다른 종류의 그래프는 시도하지 않지만 데이터 구조가 비슷한 그래프라면 잘된다고 생각합니다.
그림 아래에 스크롤 막대가 그려지고 스크롤 막대를 움직이면 스크롤 할 수 있습니다.
(오른쪽은 라벨 밖에 그려져 있지 않습니다만, 값을 넣지 않았을 뿐이므로 신경쓰지 말아 주세요.)
실행 환경
브라우저: Google 크롬
Chart.js 버전: 2.9.3
CDN을 읽고 사용하고 있습니다.
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
</head>
HTML
우선 html이 이쪽입니다.
<div class="chartWrapper" style="position: relative; overflow-x: scroll;">
<div class="chartContainer" style="height:200px;"> //高さは好きに設定
<canvas id="chart" style="position: absolute; left: 0; top: 0;"></canvas>
</div>
</div>
canvas는 두 개의 div로 둘러싸여 있습니다.
자바스크립트
이어 Javascipt가 여기입니다.
var xAxisLabelMinWidth = 15; // データ当たりの幅を設定
var data = [12, 19, 3, 5, 2];
var width = data.length*xAxisLabelMinWidth; // グラフ全体の幅を計算
document.getElementById('chart').style.width = width+"px"; // グラフの幅を設定
document.getElementById('chart').style.height = "200px"; //htmlと同じ高さを設定
var myChart = new Chart(document.getElementById('chart').getContext('2d'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [{
label: 'sample data',
data: data,
}]
},
options: {
responsive: false, //trueにすると画面の幅に合わせて作図してしまう
}
});
데이터 당 너비를 먼저 설정하고 거기에서 전체 그래프의 너비를 계산합니다.
이렇게하면 데이터 당 그리기 크기를 고정 할 수 있습니다.
완성
위의 코드로 가로 스크롤 가능한 그림을 만들 수 있다고 생각합니다.
참고
h tps : // s c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 39473991 / HO W-TO-MAKE-A-CHA RT-JS-R-CHA-RT-SC RO B B
h tps : // / s ta c ゔ ぇ 르. 코m/쟈/q/10874652
이것들을 참고로 했습니다만, 자신의 환경에서는 잘 되지 않았기 때문에 수정하고 있습니다.
Reference
이 문제에 관하여(Chart.js로 가로 스크롤 가능한 그래프 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yutake27/items/fa7b1f6b3c7c65e9d69b
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
</head>
<div class="chartWrapper" style="position: relative; overflow-x: scroll;">
<div class="chartContainer" style="height:200px;"> //高さは好きに設定
<canvas id="chart" style="position: absolute; left: 0; top: 0;"></canvas>
</div>
</div>
var xAxisLabelMinWidth = 15; // データ当たりの幅を設定
var data = [12, 19, 3, 5, 2];
var width = data.length*xAxisLabelMinWidth; // グラフ全体の幅を計算
document.getElementById('chart').style.width = width+"px"; // グラフの幅を設定
document.getElementById('chart').style.height = "200px"; //htmlと同じ高さを設定
var myChart = new Chart(document.getElementById('chart').getContext('2d'), {
type: 'bar',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
datasets: [{
label: 'sample data',
data: data,
}]
},
options: {
responsive: false, //trueにすると画面の幅に合わせて作図してしまう
}
});
Reference
이 문제에 관하여(Chart.js로 가로 스크롤 가능한 그래프 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yutake27/items/fa7b1f6b3c7c65e9d69b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
