728x90 300x250 Front-end/chart.js & d3.js10 chart.js 포인터 이미지로 변경하기 chart.js 차트의 pointer 부분을 이미지로 변경하기 그림으로 만들기 위해서는 먼저 새로운 이미지를 생성해서 변수에 넣어줍니다. const heart = new Image(); //새로운이미지 생성 생성된 변수에 이미지 위치를 불러옵니다. heart.src = "../../img/heart.png"; pointerStyle 속성에 변수 이름을 적어줍니다. pointStyle:heart 그러면 이렇게 하트 이미지의 포인터로 변경 된걸 확인할 수 있습니다. 전체 코드 2022. 1. 18. chart.js 포인터 모양 변경하기 chart.js 차트의 pointer 부분을 다른 모양으로 변경하기 포인터를 다른 모양으로 변경하기 위해서 Chart.js에서 pointer 스타일 변경 방법에 대해서 알아봅니다. https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles Elements | Chart.js Elements While chart types provide settings to configure the styling of each dataset, you sometimes want to style all datasets the same way. A common example would be to stroke all of the bars in a ba.. 2022. 1. 17. chart.js 크기 고정 방법 차트를 만들면 차트 크기는 창 크기에 따라 가변적입니다. 가변적인 chart 사이즈를 고정으로 만들기 위해서 test-chart 아이디 값에 css를 적용시켜 보겠습니다. width값과 height값이 아얘 안 먹히는 걸 확인할 수 있습니다. chart.js 크기 고정 방법 위와 canvas id에 직접 스타일을 넣어주면 적용되지 않는 걸 확인할 수 있는데요 이럴 때는 차트를 그리는 canvas를 감싸주는 엘리먼트를 넣어주고 거기에 스타일을 적용시키면 됩니다. html css .chart-wrap{ width: 400px; height: 500px; } 그러면 아래와 같이 chart.js로 만든 차트의 크기 고정이 가능합니다. 그런데 차트 비율에 맞춰져 있기 때문에 width값에 맞춰서 height값이 .. 2022. 1. 15. Chart.js 사용법 Chart.js에 접속합니다. https://www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org 지난 포스팅에서 Chart.js Installation하는 방법과 예제를 이용해서 차트를 만들어봤는데요 https://moo-you.tistory.com/446 Chart.js 시작하기 Chart.js를 사용하기 위해서는 먼저 아래사이트에 접속합니다. https://www.char.. 2022. 1. 14. 이전 1 2 3 다음 728x90 반응형
