[java] Java Vaadin 데이터 시각화 방법

15 Nov 2023

java

Vaadin은 Java로 웹 애플리케이션을 개발할 수 있는 프레임워크입니다. 이 프레임워크를 사용하여 데이터를 시각화하는 방법에 대해 알아보겠습니다.

1. Chart.js 사용하기

Chart.js는 HTML5 캔버스를 사용하여 다양한 종류의 차트를 그릴 수 있는 JavaScript 라이브러리입니다. Vaadin에서 Chart.js를 사용하기 위해서는 다음 단계를 따라야 합니다.

Maven 또는 Gradle을 사용하여 Chart.js 종속성을 프로젝트에 추가합니다.
Vaadin의 컴포넌트로 Chart.js를 래핑하는 클래스를 작성합니다.
데이터를 처리하고 차트를 그리는 로직을 작성합니다.
웹 애플리케이션에서 차트를 표시할 UI를 구성합니다.

Vaadin 출처의 예제 코드:

public class ChartComponent extends AbstractJavaScriptComponent {

    public ChartComponent() {
        addFunction("onPointClick", (args) -> {
            int index = args.getNumber(0).intValue();
            fireEvent(new PointClickEvent(this, index));
        });
    }

    public void setChartData(List<Double> data) {
        getState().setData(data);
    }

    @Override
    protected ChartComponentState getState() {
        return (ChartComponentState) super.getState();
    }

    @Override
    protected ChartComponentState createState() {
        return new ChartComponentState();
    }

    public static class PointClickEvent extends Event {

        private final int pointIndex;

        public PointClickEvent(Component source, int pointIndex) {
            super(source);
            this.pointIndex = pointIndex;
        }

        public int getPointIndex() {
            return pointIndex;
        }
    }
}

2. Highcharts 사용하기

Highcharts는 JavaScript 기반의 차트 라이브러리로, 다양한 종류의 인터랙티브 차트를 제공합니다. Vaadin에서 Highcharts를 사용하기 위해서는 다음 단계를 따라야 합니다.

Highcharts 종속성을 프로젝트에 추가합니다.
Vaadin의 컴포넌트로 Highcharts를 래핑하는 클래스를 작성합니다.
데이터를 처리하고 차트를 그리는 로직을 작성합니다.
웹 애플리케이션에서 차트를 표시할 UI를 구성합니다.

Vaadin 출처의 예제 코드:

public class HighchartsComponent extends AbstractJavaScriptComponent {

    public HighchartsComponent() {
        addFunction("onPointClick", (args) -> {
            int pointIndex = args.getNumber(0).intValue();
            fireEvent(new PointClickEvent(this, pointIndex));
        });
    }

    public void setChartData(List<Double> data) {
        getState().setData(data);
    }

    @Override
    protected HighchartsComponentState getState() {
        return (HighchartsComponentState) super.getState();
    }

    @Override
    protected HighchartsComponentState createState() {
        return new HighchartsComponentState();
    }

    public static class PointClickEvent extends Event {

        private final int pointIndex;

        public PointClickEvent(Component source, int pointIndex) {
            super(source);
            this.pointIndex = pointIndex;
        }

        public int getPointIndex() {
            return pointIndex;
        }
    }
}

위의 코드에서는 ChartComponent와 HighChartsComponent라는 두 개의 컴포넌트를 만드는 예제를 보여주었습니다. 이 컴포넌트를 사용하여 데이터를 시각화하고 웹 애플리케이션에 표시할 수 있습니다.

결론

Vaadin을 사용하여 Java로 데이터를 시각화하는 방법에 대해 알아보았습니다. Chart.js와 Highcharts는 각각 다른 방식으로 데이터를 시각화할 수 있는 인기있는 도구입니다. 프로젝트의 요구사항과 선호도에 따라 적절한 도구를 선택하고 데이터 시각화를 시작해보세요.

1. Chart.js 사용하기

2. Highcharts 사용하기

결론

참고 자료