728x90 300x250 SMALL Front-end313 chart.js 라벨 숨기기 (최신버전) 지난번 포스팅에서 막대그래프를 만들었는데요 위에 라벨 부분이 거슬려서 숨기려고 합니다. options:{ legend: { display: false }, } options에서 legend의 display를 false로 변경해주기만 하면 된다는데요 아무리 해도 숨기기가 안됩니다. 최신 버전에서는 위에처럼만 하는 걸로는 먹히지 않는데요 그래서 plugins로 한번더 감싸 줘야 합니다. options:{ plugins:{ legend: { display: false }, } } 그러면 이렇게 라벨 부분이 안보이게 표시된 걸 확인할 수 있습니다. const ctx2 = $('#test-chart2'); const myChart2 = new Chart(ctx2, { type:'bar', data:{ labels.. 2022. 1. 26. css 아이콘 구현 하기 +, 별모양 , 반달, 말풍선 모양등 css로 생각보다 다양한 종류의 모양을 만들수 있는데 아래 사이트에 가면 기본적인 사각형 타원형 부터 별모양, 화살표, 하트, 팔각형등 다양한 모양 만드는 방법을 확인할 수 있습니다. https://css-tricks.com/the-shapes-of-css/ The Shapes of CSS | CSS-Tricks CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have css-tricks.com 만약 돋보기 모양을 만들고 싶다면 아래로 쭉쭉 내려보면 돋보기 아이콘이 있습니다. 인스턴.. 2022. 1. 21. chart.js 막대그래프 각각의 bar 색상변경 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 html에 위치를 잡아주고 기본차트를 만들기 위해서는 type, data, options 이 세가지가 필요합니다. const ctx = document.getElementById('myChart'); const myChart = new Chart(ctx, { type: 'bar', data: data, opti.. 2022. 1. 20. chart.js 포인터 이미지로 변경하기 chart.js 차트의 pointer 부분을 이미지로 변경하기 그림으로 만들기 위해서는 먼저 새로운 이미지를 생성해서 변수에 넣어줍니다. const heart = new Image(); //새로운이미지 생성 생성된 변수에 이미지 위치를 불러옵니다. heart.src = "../../img/heart.png"; pointerStyle 속성에 변수 이름을 적어줍니다. pointStyle:heart 그러면 이렇게 하트 이미지의 포인터로 변경 된걸 확인할 수 있습니다. 전체 코드 2022. 1. 18. 이전 1 ··· 37 38 39 40 41 42 43 ··· 79 다음 728x90 반응형 LIST
