chart.js 사용법! chart.js에서 세련된 그래프를 표시하는 방법 (입문편)

5149 단어 웹그래프chart.js자바스크립트쉬운

소개



이번은 chart.js를 이용해 「움직이는!」 「멋쟁이!」 「간단!」인 그래프를 표시해 가고 싶습니다.

⚠️html 파일과 js 파일을 각각 만드는 것을 추천합니다만, 초보자는 망설일 가능성이 있으므로, 독단으로 정리해 html 파일에 기술해 버립니다.

chart.js란?



꺾은선형 차트, 막대형 차트, 원형 차트, 레이더 차트 등 8종류의 그래프를 쉽게 그릴 수 있는 Javascript 라이브러리입니다. HTML5의 Canvas를 사용하여 그려져 표시시의 기분 좋은 애니메이션의 움직임이 특징적입니다. 매우 알기 쉬운 마크업이므로 누구나 쉽게 편집을 할 수 있게 되어 있습니다.

실제로 표시하면 ↓와 같습니다.



소스 코드



즉시 소스 코드로 들어갑니다.
공식 사이트 하지만 샘플 코드가 공개되었습니다.
공식 사이트 내에서 그래프를 만지기 때문에 꼭!


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{

      label: 'label',
      data: [3, 18, 6, 10, 12, 7, 12],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});
</script>

</body>
</html>

각 그래프의 묘사 방법



막대 그래프: type:'line',
꺾은선형 차트: type:'bar',
레이더 차트: type:'radar',
산점도: type:'scatter',
원형 차트: type:'pie',
도넛 차트: type:'doughnut',
버블 차트: type:'bubble',
닭 머리 그림: type:'polarArea',
로 변경하면 묘사할 수 있습니다.

그래프의 수치를 변수에 의해 동적으로 변화시키고 싶을 때


data: [3, 18, 6, 10, 12, 7, 12],
　　　　　　　　　↓
data: [a, b, c, d, e, d, e],　

의 수치 부분을 임의의 변수로 하는 것만으로 ok!

요약



이번에는 chart.js로 묘사하는 8개의 그래프에 대해 소개했습니다.

소개한 소스 코드는 매우 간단합니다만, 이쪽을 베이스에 스스로 필요한 요소를 추가해 보세요.
Noodl에서 외부 JS 라이브러리 로드(그래프 표시)
Rails5에서 Chart.js가 포함 된 PDF 출력을 할 때 빠졌습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage