[chart.js] 라인차트 데이터가 있는 곳만 표시하기

const dataValues = [10, 10, 0, 3, 2, 0, 7];
    const filteredData = dataValues.map(value => (value === 0 ? null : value));
    const pointRadiusValues = dataValues.map((value, index) => {
        if (
            (value > 0) && 
            (dataValues[index - 1] === 0 && dataValues[index + 1] === 0) ||
            (index === dataValues.length - 1 && dataValues[index - 1] === 0 ) ||
            (dataValues[0] > 0 && dataValues[1] === 0 )
        ) {
            return 3;
        } else {
            return 0; 
        }
    });

new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'haha'],
        datasets: [{
          label: '# of Votes',
          data: filteredData,
          borderWidth: 3,
          pointRadius: pointRadiusValues
        }]
      },

• 데이터가 null이면 선이 안나오게 하고
• 데이터가 있을 땐 dot으로 나오게 함.
• 배열의 첫번째, 마지막은 전 후의 데이터가 0으로 인식함으로 조건을 추가하여 배열의 2번째랑 배열의 마지막 -1이 0일 때만 점을 표시하게 하였다.