티스토리 뷰

WEB/기타

[chart.js] chartSample_Bg_2data

silverline79 2024. 12. 17. 20:30

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="chart.umd.min.js"></script>
</head>

<body>
<div style="width:100%;min-width:1870px; height:370px; border:1px solid #d1d1d1;">
	<canvas id="myChart" width="100%" height="100%"></canvas>
</div>
<script>
var myCt = document.getElementById('myChart');


var myChart = new Chart(myCt, {
    type: 'bar',
    data: {
        labels: [
            '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
        ], 
		//날짜
        datasets: [
			{
				label: '발전량', //범례
				data: [
					10, 20, 300, 450, 10, 20, 300, 40, 300, 40, 10, 20, 230, 400, 1000, 20, 300, 400, 30, 40, 10, 200, 300, 400, 10, 200, 300, 400, 30, 600
				],
				backgroundColor: '#00C7E2', //bar 컬러
				hoverBackgroundColor: '#00C',
				maxBarThickness: 30
        	},
			{	
				label: '발전량2', //범례
				data: [
					10, 20, 300, 450, 10, 20, 300, 40, 300, 40, 10, 20, 230, 400, 1000, 20, 300, 400, 30, 40, 10, 200, 300, 400, 10, 200, 300, 400, 30, 600
				],
				backgroundColor: '#0045e2', //bar 컬러
				hoverBackgroundColor: '#00C',
				maxBarThickness: 30
			}
		]
    },	
    options: {
        responsive: true, // 반응형 여부 (기본값 true)
        maintainAspectRatio: false, // 크기 고정
        plugins: {
            tooltip: { // 튤팁 스타일링
                enabled: true, // 튤팁 활성화 (기본값 true)
                backgroundColor: '#000', // 튤팁 색상
                padding: 10 // 튤팁 패딩
            },
            legend: { // 범례 스타일링
                display: true, // 범례 활성화 (기본값 true)
                position: 'top', // 범례 위치
                labels: {
                    usePointStyle: true, // 범례 포인트 스타일
                }

            },
            title: { //타이틀
                display: true,
                text: '발전량 차트'
            },
            subtitle: { //서브타이틀
                display: true,
                text: 'Chart Subtitle',
                color: 'blue',
                font: {
                    size: 12,
                    family: 'tahoma',
                    weight: 'normal',
                    style: 'italic'
                },
                padding: {
                    bottom: 10
                }
            }

        },
        scales: { // x축과 y축에 대한 설정
            x: {
                grid: { // 축에 대한 격자선
                    display: false, // grid 활성화 (기본값 true)
                }
            },
            y: {
                min: 0, // y축에 대한 최소값
                max: 1000, // y축에 대한 최대값
                border: { // 축에 대한 테두리 속성
                    dash: [5, 5] // 점선 형태
                },
            }
        }
    }

});
</script>
</body>
</html>

chart.umd.min.js
0.19MB
chartSample_Bg_2data.html
0.00MB

'WEB > 기타' 카테고리의 다른 글

[HTML] 폼 영역에 선언  (0) 2024.12.17
SNS 아이콘  (0) 2024.12.17
[echart.js] line-sample_클릭시막대그래프라인표시  (0) 2024.12.17
[echart.js] 라벨 2개  (1) 2024.12.17
JavaScript-Equality-Table  (0) 2024.12.17
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함