GrandeisHorse
241
2021-09-09 16:39:53
1
85

자바스크립트 그래프 그린 이후..


안녕하세요.

자바스크립트로 그래프를 그리다가 잘 안되는 부분이 있어 질문 남깁니다..

웹페이지 상단에는 데이터가 들어간 테이블들이 있구요. 이 테이블의 한 줄 한줄을 클릭할때마다

데이터를 기반으로 그래프를 그려봤습니다.


대략


$(document.body).delegate('.td_row', 'click', function(){
클릭과 동시에 table에서 데이터를 가져옴.

//그래프 출력
function makeData(dataSet){
context.beginPath();
context.moveTo(0, dataSet[0]);
context.lineWidth = 0.1; // 그래프 선의 굵기
context.lineCap = "round"
context.lineJoin = "round";

for (i = 1; i < sections; i++) {
context.lineTo(i * xScale, dataSet[i]);
}  //테이블에서 가지고온 정보들

context.stroke();	//그래프를 그린다
}

});


이런식으로 테이블 클릭 이후에 data를 긁어서 function makeData로 가공해서 최종적으로

context.stroke();로 그려주는데요.


그래프는 잘 그려지는데,

이후 제가 다른 테이블을 클릭할때마다 그래프를 새롭게 그려주고 싶습니다.


지금 상태에서는 console을 입력해보니 클릭할때마다 새로운 데이터는 잘 가져오는데,

맨 처음 그려진 그래프만 계속 유지되고, 새로운 그래프는 안그려지더라구요.


그래프 출력 이후에 그렸던걸 초기화 하고, 새롭게 그려줘야하는거 같은데

어떤 방법이 있을까요? 페이지 전체 새로고침은 말고, 페이지는 유지한채 클릭만으로 그래프를 계속적으로 그려주고 싶습니다:)

0
  • 답변 1

  • ukyo
    65
    2021-09-09 18:03:03

    context.clearRect(0, 0, canvas.width, canvas.height)

    해주시면 됩니다.


  • 로그인을 하시면 답변을 등록할 수 있습니다.