[java] Vaadin에서 그래프 및 차트 사용하기

29 Nov 2023

java

Vaadin은 Java로 웹 애플리케이션을 개발하기 위한 오픈 소스 프레임워크입니다. Vaadin을 사용하면 쉽게 그래프 및 차트를 포함한 데이터 시각화를 구현할 수 있습니다. 이 글에서는 Vaadin을 사용하여 그래프 및 차트를 만드는 방법에 대해 알아보겠습니다.

1. Vaadin Charts 설치하기

Vaadin Charts는 데이터 시각화를 위한 라이브러리입니다. Vaadin 프로젝트에 Vaadin Charts를 추가하기 위해 Maven 또는 Gradle을 사용할 수 있습니다.

Maven을 사용하는 경우, pom.xml 파일에 다음 의존성을 추가합니다:

<dependency>
    <groupId>com.vaadin.addon</groupId>
    <artifactId>vaadin-charts</artifactId>
    <version>4.0.5</version>
</dependency>

Gradle을 사용하는 경우, build.gradle 파일에 다음 의존성을 추가합니다:

implementation 'com.vaadin.addon:vaadin-charts:4.0.5'

의존성을 추가한 후에는 프로젝트를 동기화하고 Vaadin Charts를 사용할 준비가 되었습니다.

2. 그래프 생성하기

먼저, Vaadin UI 클래스에 그래프를 표시할 컴포넌트를 추가해야 합니다. 다음은 Bar 차트를 만드는 예제입니다:

import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.ChartType;
import com.vaadin.addon.charts.model.Configuration;
import com.vaadin.addon.charts.model.DataSeries;
import com.vaadin.addon.charts.model.DataSeriesItem;
import com.vaadin.ui.HorizontalLayout;

public class MyChartView extends HorizontalLayout {
    
    public MyChartView() {
        Chart chart = new Chart(ChartType.BAR);
        Configuration configuration = chart.getConfiguration();
        
        // 데이터 추가
        DataSeries dataSeries = new DataSeries();
        dataSeries.add(new DataSeriesItem("항목 1", 10));
        dataSeries.add(new DataSeriesItem("항목 2", 20));
        dataSeries.add(new DataSeriesItem("항목 3", 15));
        
        configuration.setSeries(dataSeries);
        
        addComponent(chart);
    }
}

위의 코드에서는 ChartType.BAR를 사용하여 Bar 차트를 생성하고, DataSeries를 사용하여 데이터를 추가합니다. 데이터 항목은 DataSeriesItem 클래스로 생성하여 추가할 수 있습니다.

3. 그래프 옵션 설정하기

그래프의 모양과 스타일을 변경하기 위해 Vaadin Charts는 다양한 옵션을 제공합니다. 예를 들어, 다음은 그래프의 제목과 축 레이블을 설정하는 방법입니다:

// 제목 설정
configuration.setTitle("매출 현황");

// X축 레이블 설정
configuration.getxAxis().setTitle("월별");

// Y축 레이블 설정
configuration.getyAxis().setTitle("매출액");

기타 그래프 옵션에 대해서는 Vaadin Charts 문서를 참고하세요.

4. 차트 변경사항 업데이트하기

그래프의 데이터나 옵션을 다시 설정하려면 UI 컴포넌트를 다시 렌더링해야 합니다. Vaadin에서는 UI.getCurrent().access() 메서드를 사용하여 UI 스레드에서 변경사항을 업데이트할 수 있습니다.

UI.getCurrent().access(() -> {
    // 그래프 변경사항 업데이트
    chart.getConfiguration().setTitle("새로운 제목");
    chart.drawChart();
});

마무리

이제 Vaadin에서 그래프 및 차트를 사용하는 방법에 대해 알아보았습니다. Vaadin Charts를 사용하면 Java로 웹 애플리케이션에서 데이터 시각화를 쉽게 구현할 수 있습니다. Vaadin Charts의 다양한 기능과 옵션을 사용하여 원하는 형태의 그래프를 만들어보세요.

참고 문서: Vaadin Charts