상상쓰

[javascript] chart.js 활용하기 본문

Programming

[javascript] chart.js 활용하기

상상쓰 2021. 8. 23. 18:46

 

chart.js 와 chart.css 를 이용하여 원하는 차트를 만들 수 있다.

 

<script>

var chart = document.getElementById('chart').getContext('2d');

new Chart(chart, {
    type: 'bar', // 막대, line : 꺾은선 그래프
    data: {
        labels: ['x축 배열'],
        datasets: [
            {
                label: '라벨1',
                data: ['y축 배열'],
                backgroundColor: Color
            },
            {
                label: '라벨2',
                type: 'line', // default : 상단 type에 설정한 'bar'
                data: ['y축 배열'],
                backgroundColor: 'transparent', // 투명한
                borderColor: 'Color',
                /* borderDash: [0 ,6],
                borderCapStyle: 'round', // 점선 그래프, 점의 모양 */
                lineTension: 0, // line 볼록정도
                pointRadius: 5, // 포인트 크기
                pointStyle: 'rect', // 직사각형, triangle : 삼각형, default : circle (원형)
                pointBackgroundColor: 'Color', // default : 'transparent'
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: '제목',
            fontSize: 10
        },
        scales: {
            xAxes: [{
                gridLines: {
                    drawOnChartArea: false
                }
            }],
            yAxes: [{
                ticks: {
                    display: true,
                    min: 0,   //y축 최솟값
                    max: 999, //y축 최댓값
                    stepSize: 1
                }
            }]
        },
        legend: { // 범례
            position: 'bottom',
            labels: {
                usePointStyle: true, // 지정된 포인트 모양에 따라 범례 아이콘 생성
                boxWidth: 10,
                padding: 10
            }
        }
    }   
});

 

<html>

<canvas id="chart" style="width:100%";height:???px;">
	chart 정보 입력
</canvas>

 

참고1 - chart.js 의 elements 자세히

https://www.chartjs.org/docs/latest/configuration/elements.html

 

Elements | Chart.js

Elements While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a bar chart with the same colour but change the fill per dat

www.chartjs.org

 

참고2 - chart.js 의 활용

https://www.busan.go.kr/covid19/Status01.do

 

부산광역시 코로나19 (BUSAN COVID-19)

확진자 추세 목록내 검색 2021-07-17 누계 확진자 7045명 2021-07-18 누계 확진자 7116명 2021-07-19 누계 확진자 7164명 2021-07-20 누계 확진자 7261명 2021-07-21 누계 확진자 7368명 2021-07-22 누계 확진자 7484명 2021-0

www.busan.go.kr

 

'Programming' 카테고리의 다른 글

[java] HashMap value(값)로 정렬하기  (0) 2021.10.24
[java] PriorityQueue(우선순위 큐) 소개  (0) 2021.10.24
[Spring] @PathVariable을 이용한 경로(@RequestMapping) 변수  (0) 2021.08.26
[Firebase] 짧은 동적 링크 만들기 (java)  (0) 2021.07.27
[Firebase] 짧은 동적 링크 만들기 (jquery)  (0) 2021.07.23
'Programming' Related Articles more
Comments