chart.js 포인터 이미지로 변경하기

chart.js 차트의 pointer 부분을 이미지로 변경하기

 

그림으로 만들기 위해서는  먼저 새로운 이미지를 생성해서 변수에 넣어줍니다.

const heart = new Image(); //새로운이미지 생성

생성된 변수에 이미지 위치를 불러옵니다.

heart.src = "../../img/heart.png";

pointerStyle 속성에 변수 이름을 적어줍니다.

pointStyle:heart

 

그러면 이렇게 하트 이미지의 포인터로 변경 된걸 확인할 수 있습니다.

 

전체 코드

    <div class="chart-wrap2">
    	<canvas id=test-chart></canvas>
    </div>


    <script>
        const ctx = $('#test-chart');
        const heart = new Image(); //새로운이미지 생성
        heart.src = "../../img/heart.png";
        const myChart = new Chart(ctx, {
        type:'line',
        data:{
            labels:['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[
                {
                label:'2021',
                data:[5,10,8,5,10,15],
                backgroundColor:'rgba(203,206,145,.5)', //배경색상
                borderColor:'#CBCE91',
                fill:true,
                lineTension:0, //선 곡선모양 0이면 직선
                pointStyle:heart,// 위에 지정한 이미지로 변경하기
                },
                
            ]
        },
        options:{
                    maintainAspectRatio :false
                }
        });
    </script>