Highcharts API로 series name, data 배열로 넣기(시리즈 데이터 동적으로 추가하기)

Highcharts API로 데이터 시각화

Highcharts는 웹 개발에서 매우 인기 있는 차트 라이브러리입니다. 이를 사용하면 다양한 형태의 차트를 손쉽게 구현할 수 있죠. 오늘은 Highcharts를 사용하여 시리즈(name 및 data 배열)를 동적으로 추가하는 방법에 대해 알아보겠습니다.

 

 

기본 차트 옵션 설정

먼저, Highcharts의 기본 옵션을 설정합니다. 이 옵션은 차트를 어디에 렌더링할 것인지(renderTo), 차트의 제목(title), 축(xAxis, yAxis) 등을 포함합니다.

chartOptions = {
    chart: {
        renderTo: 'container' // 차트를 표시할 요소의 ID
    },
    // 다른 옵션들...
    series: [] // 시리즈는 나중에 추가
};

 

여기서 series: []는 차트의 데이터 시리즈를 나중에 추가하기 위해 비워둡니다.

 

차트 생성 및 시리즈 추가

다음으로, 설정한 옵션을 사용하여 Highcharts 객체를 생성합니다.

chart = new Highcharts.Chart(chartOptions);

 

이제 동적으로 시리즈를 추가할 수 있습니다.

예를 들어, 쿼리 결과값을 배열로 받아 name과 data를 설정할 경우, 다음과 같이 for문을 사용하여 시리즈를 추가할 수 있습니다.

 

for(var n = 0; n < 동적 데이터의 길이; n++){
    var name = 데이터의 이름;
    chart.addSeries({
        name : name,
        data: 데이터 배열
    });
}

 

이렇게 하면 차트에 필요한 데이터 시리즈를 유연하게 추가할 수 있습니다.

 

Highcharts의 장점

• 유연성: 데이터가 변경되거나 업데이트될 때 쉽게 시리즈를 추가하거나 수정할 수 있습니다.
• 효율성: 데이터를 시각화하는 과정을 간소화하고, 사용자에게 유용한 정보를 제공할 수 있습니다.