[Chart.js] 데이터 값마다 포인트 이미지 다르게 주고 싶다.

데이터는 0 ~ 100으로 들어가지만 위아래 여백을 주고 싶어서 +- 10씩 해줬다.

 

      <div class="chart">
        <canvas id="myChart"></canvas>
      </div>

 

const ctx = document.getElementById('myChart');
const dataValues = [75, 25, 50, 0, 100];
// 이미지 아이콘
const imageUrls = [
    './emoji_0.png',
    './emoji_25.png',
    './emoji_50.png',
    './emoji_75.png',
    './emoji_100.png',
]
const images = imageUrls.map(url => {
    const img = new Image(25, 25);
    img.src = url;
    return img;
});

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['일', '이', '삼', '사', '오'],
    datasets: [{
      label: '# of Votes',
      data: dataValues,
      borderWidth: 2,
      borderColor: 'salmon',
      lineTension: 0.4,
      pointStyle: function(context) {
        const value = context.dataset.data[context.dataIndex];
        let index;
        if (value === 0) {
            index = 0;
        } else if (value === 25) {
            index = 1;
        } else if (value === 50) {
            index = 2;
        } else if (value === 75) {
            index = 3;
        } else {
            index = 4;
        }
        return images[index];
    }
    }]
  },
  options: {
        layout: {
            padding: {
                left: 20,   
                right: 40,  
                top: 20,    
                bottom: 20  
            }
        },
    scales: {
        x: {
            display:false,
            offset: true,
        },
        y: {
            min: -10,  
            max: 110, 
            ticks: {
                stepSize: 60,
            },
        }
    }
  }
});

이미지 주소를 imageUrls 배열에 넣고 값에 따라 이미지를 넣어줬다.

데이터 0이면 = image[0]

25이면 = image[1] ..... 난 데이터를 5개로만 넣을거라 이렇게 했지만 

영역으로 한다면 0 ~ 24 이렇게 바꾸면 될듯하다.

 

상하좌우 여백 주기 위해서 min max값을 조정.

좌우 여백은 x offset으로 넣었다.