Chart.js 소개
소개
데이터 시각화에 관심이 있었기 때문에 여러 가지를 살펴 보았습니다.
다음과 같은 라이브러리가 많이 사용되고 있다는 것이었습니다.
이 기사에서는 Charts.js에 대한 환경 구축에서 샘플 그래프 그리기까지 소개합니다.
대상자
실행 환경
설치
공식 문서를 참조하면 npm bowser Github 등에서 설치할 수있는 것 같습니다.
html src로 지정하여 사용할 수 있으므로 특히 로컬로 설치할 필요가 없습니다.
참고로 npm을 사용한 설치는 다음 명령을 실행합니다.
npm install charts.js --save
코드
다음 코드를 html 형식으로 저장합니다.
코드 설명은 공식 문서가 일본어이므로 생략하겠습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>graph</title>
</head>
<body>
<h1>title</h1>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// 作成したいチャートのタイプ
type: 'line',
// データセットのデータ
data: {
labels: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul."],
datasets: [{
label: "first data set",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
// 設定オプション
options: {}
});
</script>
</body>
</html>
브라우저에서 확인하면 그래프가 표시됩니다.
다음은 오픈 데이터를 다양한 표시 형식으로 표시합니다.
참고
htps : // 미 sc. 0오0오. 오 rg / cha rtjs-do c-ja / 곁치 g-s r d /
htps //w w.ぇbp 로후 ゜시오 l. jp / 인 t 로즈 c 치 온 짱 rt js - 2 - 0 - x - 에 mp ぇ s /
Reference
이 문제에 관하여(Chart.js 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/izumoToyakumo/items/ac3d25516241e7f9a6cc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
