반응형

chart.js 4

[Chart.js] stacked bar chart 만드는 법 ( customizing )

1. 완성 이미지 나의 경우에는 내가 진행하고 있는 개인 프로젝트에서 아무것도 없이 그래프만 나타나는 버전을 원했기에 chart.js 를 활용하여 customize 를 했다. 많이 참고자료가 없어서 오랜시간동안 API 와 구글링을 하였다. 2. 코드 설명 1) DATASET //chart.js 옵션 setting var data = { labels : ['a'], datasets : [ { label : 'a', data : [42], backgroundColor : '#4169e1' }, { label : 'b', data : [83], backgroundColor : '#87ceeb' }, { label : 'c', data : [31], backgroundColor : '#b0e0e6' }, ] }..

기타 Develop 2021.11.02

[ Node.js ] db 데이터를 chart.js에 적용하여 그래프 만들기

처음에는 node.js 에서 진행을 하는 것이었기에 막연한 것도 있었다. 스프링으로는 진행을 해보았었기에 내가 찾고자 하는 레퍼런스도 쉽게 찾을 수 있고 큰 문제는 없었지만 node.js 로 진행을 하는 것은 내가 참고할만한 레퍼런스도 많이 찾기가 힘들었다는 문제도 있었다. 그러기에 추후 작업에 참고하기 위해 블로그에 기록을 해놓아야 겠다. 1. 숙지 사항 DB 는 MySQL 을 사용했다. node.js 에 MVC 모델을 적용했음 데이터를 전달하는 방식은 POST 방식 Node.js 와 MySQL 은 이미 연결을 했다고 가정한다 chart.js 는 html 스크립트에서 링크를 불러와 동작하는 CDN 방식을 사용했다 2. Router 에서 데이터 가져오기 - 라우터란? 라이언트의 요청 경로(path)를 보..

Back End/Node.js 2021.09.29

[ Java Script Error ] Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.

1. 에러 원인 태그에 canvas 를 넣었던 것이 화근이었음 태그의 경우에는 해당 태그 내에 value 가 담길 경우 그 value 들을 저장하여 다음 단계로 전달하는 역할을 한다 2. 해결 방법 태그를 없애는 쪽으로 해결을 했다. button 3. 참고 링크 하기 링크는 destroy( ) 를 써서 해결했다는 것이었다. 다른 해결방법이었지만 해당 방법은 적용하지 않았다 https://stackoverflow.com/questions/40056555/destroy-chart-js-bar-graph-to-redraw-other-graph-in-same-canvas Destroy chart.js bar graph to redraw other graph in same I am using the Chart.j..

[Java Script Error] Chart Js Cannot read property 'length' of undefined

우선 chart.js 를 실행할 때, function( ) 을 사용하지 않아 위 에러가 발생했었지만, 다른 함수를 만들어 사용할 때도, 비슷한 에러를 몇번 발견한 적이 있었기 때문에.. 앞으로 함수를 만들어서 사용할 때는 꼭 function( ) 으로 감싸주고 사용해야 겠다. 원인 - The problem is that when your code executes, the canvas has not been created yet - 코드 실행시 가 아직 만들어지지 않았기 때문에 해당 문제가 발생 해결 - You should wrap your code inside a function and assign that function to window.onload event. - 코드를 function( ) 으로 ..

반응형