8 글 보임 - 1 에서 8 까지 (총 8 중에서)
-
글쓴이글
-
2022년 10월 4일 23:20 #49202
조승엽참가자<canvas id="myChart" width="400" height="400"></canvas> <script> const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> 위 처럼 사이트에서 퍼온 코드에서 data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], 이 부분에 datasets의 label이나 데이터를 홈페이지에서 입력해서 변경하고 싶어서, 그냥 스트링대신 변수를 넣었는데 [object HTML inputElement]라고 뜨네요. 저기에 직접안쓰고 이벤트리스너로 했을땐 반응도 없는것 같고요.2022년 10월 5일 10:00 #49231
codingapple키 마스터myChart.data.datasets[0].data[0] = 50; myChart.update(); 값 변경하려면 이런 코드 실행해야한다고 하는군요
2022년 10월 6일 20:01 #49418
조승엽참가자잘되네요. 감사합니다. 그래프를 스샷하려고 html2canvas로 시도해보고 있는데, 화면에 보여지는 크기로 스샷을 찍고 싶은데 스샷 크기는 그보다 더 작게나오네요. 게다가 그래프의 크기를 scale로 작게해서 스샷하면 그냥 작아진 스샷을 원했는데, 그냥 scale이 1이였을때 배경에 왼쪽위로 일부영역만 차지하고 있는 모습으로 나와서 어떻게 해야할지 모르겠네요.
2022년 10월 6일 20:02 #49419
조승엽참가자<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" /> <link href="main.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> </head> <body>
<div class="top-wrap hide"> <h4>그래프 자세히보기</h4> </div>
<div class="data-container up100"> <div class="data-container-position"> <div class="databox"> <div> <h1>그래프를 만들어보자</h1> </div>
<div> <p><span>0<</span> 그래프크기 <span>>=100</span> </p> <input id="graph-size" type="number" value="100" /><span>%</span> <p>그래프이름</p> <input id="graph-name" type="text" /> <button id="change-graph-btn">버튼</button> </div>
</div>
<div class="data-container-foot"> <h4>그래프 만들기</h4> </div>
</div> </div>
<div class="container"> <button id="screenShot">그래프스샷</button>
<div class="chart-container"> <canvas id="myChart"></canvas> </div> </div>
<script> let graph = document.querySelector("#myChart"); // 그래프 인풋창 여닫기 let topWrap = document.querySelector(".top-wrap"); let dataContainer = document.querySelector(".data-container"); let dataContainerFoot = document.querySelector(".data-container-foot"); dataContainerFoot.addEventListener('click',function(){ dataContainer.classList.remove('up100'); topWrap.classList.remove('hide'); dataContainerFoot.className += ' hide' }) topWrap.addEventListener('click',function(){ topWrap.className += ' hide'; dataContainer.className += ' up100'; dataContainerFoot.classList.remove('hide'); })// 그래프데이타 인풋 let graphName = document.getElementById("graph-name"); let graphSize = document.getElementById("graph-size"); let changeGraphBtn = document.getElementById("change-graph-btn");// 숫자입력칸 경고 // 그래프크기 let chartContainer = document.querySelector('.chart-container'); graphSize.addEventListener('input',function(){ if(graphSize.value == ''){ alert('숫자만입력하세요') graphSize.value = 100; } })// 그래프에 데이타 적용 changeGraphBtn.addEventListener("click", function () { console.log(graphName.value); console.log(myChart.data.datasets[0].label); console.log(graphSize.value) if(parseFloat(graphSize.value)/100 > 0 && parseFloat(graphSize.value)/100 <= 1){ chartContainer.style.transform = `scale(${parseFloat(graphSize.value)/100})`; }else{ alert('0 초과 100이하의 숫자 사이에서 입력하세요.') } myChart.data.datasets[0].label = graphName.value; myChart.update(); });// 스샷버튼 let screenShot = document.getElementById("screenShot"); screenShot.addEventListener("click", function () { makeDivToImageFile(graph); });function saveAs(url, fileName) { const link = document.createElement("a"); link.href = url; link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); }function makeDivToImageFile(graph) { html2canvas(graph, { allowTaint: true, useCORS: true, /* 아래 3 속성이 canvas의 크기를 정해준다. */ width: graph.offsetWidth, height: graph.offsetHeight, scale: parseFloat(graphSize.value)/100, }) .then(function (canvas) { const imageURL = canvas.toDataURL("image/jpeg"); saveAs(imageURL, "new file.jpg"); }) .catch(function (err) { console.log(err); }); }// 그래프 차트 var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { //차트설정 type: "line", //차트데이터 data: { labels: [ "January", "February", "March", "April", "May", "June", "July", ], datasets: [ { label: "My First dataset", backgroundColor: "rgb(255, 99, 132)", borderColor: "rgb(255, 99, 132)", data: [0, 100, 50, 200, 2000, 30, 45], }, ], // datasets 이 부분을 조작하시면 차트 아이템의 제목, 배경색, 테두리색, 데이터값을 각각 수정하실 수 있습니다. }, options: {}, }); </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous" ></script> </body> </html>2022년 10월 6일 20:03 #49420
조승엽참가자.container{ background-color: #eee; box-sizing: border-box; margin-top: 70px; margin-bottom: 15px; padding-top: 50px; padding-bottom: 1px; } .div{ margin-top: 10px; }#myChart{ width: 100%; } .top-wrap{ position: sticky; top:0; z-index: 4; width: 100%; height: 70px; text-align: center; display: flex; align-items: center; justify-content: center; /* color: white; */ transition: all 1s; } .data-container{ position:fixed; z-index: 5; background-color: black; opacity: 0.5; width: 100vw; height: 100vh; color: white; transition: all 1s; } .data-container-position{ width: 100vw; height: 100vh; } .databox{ max-width: 50%; margin-left: auto; margin-right: auto; margin-top: 30px; } .data-container-foot{ position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); transition: all 1s; } .chart-container{ transform: scale(1); background-color: white; } #myChart{ width: 100%; height: 100%; } .up100{ transform:translateY(-100%) } .hide{ display: none; }2022년 10월 8일 14:40 #49574
조승엽참가자https://codingapple.com/forums/topic/%ed%8a%b9%ec%a0%95div%eb%a7%8c-%ec%83%88%eb%a1%9c%ea%b3%a0%ec%b9%a8/#post-49528 여기 답변대로 해봤는데 그래프가 안뜨는것 같아서요. 저기 있는 그래프 저 입력창 전에 그래프선택창을 먼저 뜨게 해서 그래프모양 선택먼저할수 있게 하려는데요. var myChart = new Chart(ctx, 그래프형태); 으로 만들고, 그래프들은 다른js에 변수로 만들어서 module로 만들어서 sellect로 선택하면 그래프모양 = sellect로 선택된거로 만든후, 답변주신 innerHTML해보니 그래프가 사라지더라고요.
-
글쓴이글
8 글 보임 - 1 에서 8 까지 (총 8 중에서)
- 답변은 로그인 후 가능합니다.