[javascript] 페이지마다 달라지는 차트값 (highchart.js)

 

highchart.js를 이용해서 차트를 생성했다.

한페이지에 적게는 1개, 많게는 9개까지 차트를 생성해야하는데,

그럴때마다 var 차트1={차트옵션}, var chartOption2 = {어쩌구}, var chartOption3 = {어쩌구}...

이렇게 생성하고 싶지 않아서

머리를 굴렸다.

 

//page1.html
<div class="cate cate1">
    <div class="chart"><div class="chart1" id="chart1"></div></div>
    <div class="chart"><div class="chart2" id="chart2"></div></div>
    <div class="chart"><div class="chart3" id="chart3"></div></div>
</div>

//page2.html
<div class="cate cate2">
    <div class="chart"><div class="chart1" id="chart1"></div></div>
    <div class="chart"><div class="chart2" id="chart2"></div></div>
    <div class="chart"><div class="chart3" id="chart3"></div></div>
</div>

//page3.html
<div class="cate cate3">
    <div class="chart"><div class="chart1" id="chart1"></div></div>
    <div class="chart"><div class="chart2" id="chart2"></div></div>
    <div class="chart"><div class="chart3" id="chart3"></div></div>
</div>

 

테스트를 위해서 html파일을 3개 만들고

 

//차트값
      //page 1
const CATE_1_DATA_0 = [1, 1, 1, 1, 1, 1, 9],
      CATE_1_DATA_1 = [2, 2, 2, 2, 2, 2, 9],
      CATE_1_DATA_2 = [3, 3, 3, 3, 3, 3, 9],
      //page2
      CATE_2_DATA_0 = [4, 4, 4, 4, 4, 4, 9],
      CATE_2_DATA_1 = [5, 5, 5, 5, 5, 5, 9],
      CATE_2_DATA_2 = [6, 6, 6, 6, 6, 6, 9],
      //page3
      CATE_3_DATA_0 = [7, 7, 7, 7, 7, 7, 9],
      CATE_3_DATA_1 = [8, 8, 8, 8, 8, 8, 9],
      CATE_3_DATA_2 = [9, 9, 9, 9, 9, 9, 9];

const text1 = ['접근성텍스트', '안녕하세요', '반가워요'];
const text2 = ['부산집', '코코넛크랩', '쌀국수'];
const text3 = ['맛도리', '푸드파이터', '다이어터'];

차트 데이터값을 js상단에 몰아두고

 

let key;
const chart = document.querySelectorAll('.chart > div');
const cate = document.querySelector('.cate');
chart.forEach((e, index)=>{
    //console.log(eval('data' + i));
    if(cate.classList.contains('cate1')){key = 1;}
    if(cate.classList.contains('cate2')){key = 2;}
    if(cate.classList.contains('cate3')){key = 3;}
    
    var chartOption = {
        chart: {polar: true, type: 'area', backgroundColor:'transparent', margin:10},
        credits: {enabled: false},
        accessibility: {
            description: eval('text' + key + '[index]') //접근성문구 값을 가져옴
        },
        title: false,
        pane: {startAngle:-51, size: '77%', center:["50%", "40%"]},
        legend:{layout: 'horizontal'},
        xAxis: {
            categories: ['가', '나', '다', '라', '마', '바', '사'],
            tickmarkPlacement: 'on',
            lineWidth: 0,
            labels:{
                style:{ color:"#ef4a5a", fontSize:15, fontFamily: 'Noto Sans KR',}
            }
        },
        yAxis: {
            gridLineInterpolation: 'polygon', lineWidth: 0, min: 0,
        },
        tooltip: {enabled: false},
        series: [{
            showInLegend: false,
            data: eval('CATE_' + key + '_DATA_' + index), // eval()를 사용해서 문자열을 변수로 바꿔줌
            pointPlacement: false,
            color:'#ef4a5a',
            opacity:0.35,
        }],
        responsive: {  
        rules: [{  
                condition: {maxWidth: 768},  
                chartOptions: {
                    legend: {align: 'center', verticalAlign: 'top', layout: 'horizontal'},
                    pane: {size: '66%'}
                }  
            }]  
        }
    }
    eval("var chartName" + index + ' = chartOption');
    //chartName1, chartName2... 이런식으로 변수 만들어줌

    /* highchart 연결 */
    const chartID = chart[index].className; //클래스명과 동일한 아이디에게 차트 보여줌
    Highcharts.chart(`${chartID}`, eval("chartName" + index));
    console.log(eval("chartName" + index));
})

1씩 커지는 변수명을 생성하고 싶은데 `name${index}`는 안되길래

구글에 검색해서 eval()이란걸 찾았다

​

참고

https://ux.stories.pe.kr/195

javascript에서 동적으로 변수를 만들 수 있는 eval()

 

for each 사용해서

이렇게 하면 복붙으로 길어지는 꼴보기싫은 코드를 안쓸수 있음 !

위에 if문으로 key = 1, key = 2 ... 이렇게 하는거도

for each로 돌릴 수 있는데, 귀찮아서 안썼음

나중에 페이지가 많아지면 key = index 이렇게 돌려야딩

​

결과

https://3lehyo.csb.app/

Document

짜좐

​

나 혹시 천재 ? ㅎㅋ