web chart - 실시간 차트


https://www.chartjs.org 

https://c3js.org/ 



실시간차트



axㅁㅁㅁㅁ

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>실시간 인터랙티브 차트</title> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.20/c3.min.css" rel="stylesheet"> <style> #chart { width: 100%; height: 500px; } .annotation { position: absolute; background: white; border: 1px solid black; padding: 5px; display: none; } .selection { fill: rgba(0, 0, 255, 0.1); stroke: blue; } </style> </head> <body> <div id="chart"></div> <div id="annotation" class="annotation"> <textarea id="annotationText" rows="3" cols="30"></textarea> <button onclick="saveAnnotation()">저장</button> </div> <script> let chart; let data = []; let annotations = []; let selectedRange = null; function initChart() { chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data', ...data] ] }, axis: { y: { padding: { top: 100, bottom: 100 } } }, zoom: { enabled: true }, subchart: { show: true } }); d3.select('#chart svg') .call(d3.drag().on("drag", dragged)) .on("wheel", zoomed) .on("click", clicked); d3.select('#chart svg') .append("rect") .attr("class", "selection") .style("display", "none"); } function updateChart() { const newValue = Math.random() * 100; data.push(newValue); if (data.length > 100) data.shift(); chart.load({ columns: [ ['data', ...data] ] }); updateAnnotations(); setTimeout(updateChart, 1000); } function dragged(event) { const dx = d3.event.dx; const range = chart.x.range(); const domainDiff = chart.x.invert(range[1]) - chart.x.invert(range[0]); const domainDx = (domainDiff / (range[1] - range[0])) * dx; chart.zoom.translate([chart.zoom.translate()[0] - domainDx, 0]); chart.zoom.update(); } function zoomed(event) { const direction = d3.event.deltaY < 0 ? 'in' : 'out'; const factor = direction === 'in' ? 1.1 : 0.9; chart.zoom.scale(chart.zoom.scale() * factor); chart.zoom.update(); } function clicked(event) { const [x, y] = d3.mouse(this); const xValue = chart.x.invert(x); const yValue = chart.y.invert(y); const annotation = document.getElementById('annotation'); annotation.style.left = `${x}px`; annotation.style.top = `${y}px`; annotation.style.display = 'block'; selectedRange = { x: xValue, y: yValue }; } function saveAnnotation() { const text = document.getElementById('annotationText').value; annotations.push({ ...selectedRange, text }); document.getElementById('annotation').style.display = 'none'; document.getElementById('annotationText').value = ''; updateAnnotations(); } function updateAnnotations() { d3.selectAll('.annotation-point').remove(); d3.selectAll('.annotation-tooltip').remove(); annotations.forEach(ann => { const x = chart.x(ann.x); const y = chart.y(ann.y); d3.select('#chart svg') .append('circle') .attr('class', 'annotation-point') .attr('cx', x) .attr('cy', y) .attr('r', 5) .attr('fill', 'red'); d3.select('#chart svg') .append('text') .attr('class', 'annotation-tooltip') .attr('x', x + 10) .attr('y', y - 10) .text(ann.text); }); } initChart(); updateChart(); </script> </body> </html> 
0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
46 JS 글자수 체크(공백포함, 제외) 및 언어 옵션 설정 관리자 09-02 108
45 web chart - 실시간 차트 관리자 07-25 174
44 비동기 프로그래밍 관리자 07-25 149
43 table thead 고정과 tbody 스크롤 관리자 07-23 188
42 datepicker 사용하여 공휴일 직접 지정하기 관리자 06-11 251
41 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리 관리자 03-06 436
40 JSPDF 사용법(Javascript pdf) 관리자 03-04 602
39 FullCalendar(풀캘린더) 어거지 사용법 관리자 01-25 627
38 JQUERY - id가 여러개인데 한번에 찾고 싶을때! ${} 관리자 12-28 464
37 [CSS] 가로 스크롤 구현하기 관리자 12-27 592
36 JCROP을 이용한 업로드한 크롭( CROP ) 하기 관리자 12-27 543
35 제이쿼리 - 모달 다이아로그 및 여러 알림창들 관리자 12-21 295
34 Javascript/jQuery 이미지 회전 돋보기 관리자 11-07 642
33 Resolving the Issue of Fakepath in JavaScript 관리자 10-26 328
32 div 및 요소 화면 중앙에 위치시키기 관리자 10-21 360
31 [Jquery] 체크박스 전체 체크 , 해제 하는 방법 관리자 10-19 360
30 display 스타일 속성 사용하여 행 숨기기/보이기 관리자 09-16 701
29 자주 사용하는 비주얼 스튜디오 코드(Visual Studio Code, VSC, vscode) 단축키 정리 관리자 09-14 782
28 div 2개 나란히 정렬하는 방법 관리자 09-09 532
27 HTML, CSS - 헤더컬럼 고정형 table 구성하기 관리자 09-06 411