[JavaFX] JavaFX Line Chart 구현 하기

JavaFX Line Chart 구현하기 

 이번 시간에는 아주 간단한 (?) JavaFX의 기본으로 제공하는 Line Chart를 구현 해보겠습니다. JavaFX에서 제공하는 Chart는 디자인이 꽤 괜찮습니다. 그래서 목적에 맞게 바꿔 써도 될 정도로 유용합니다.

 일단 띄워보기만 하겠습니다.

■ FXML

 먼저 FXML 코드 부터 작성을 하죠. 

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.*?>
 
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<VBox fx:controller="sample.Controller"
         xmlns:fx="http://javafx.com/fxml" alignment="center">
    <LineChart fx:id="lineChart">
        <xAxis>
            <NumberAxis lowerBound="0" upperBound="20" tickUnit="4" fx:id="xAxis"/>
        </xAxis>
        <yAxis>
            <NumberAxis lowerBound="0" upperBound="20" tickUnit="4" fx:id="yAxis"/>
        </yAxis>
    </LineChart>
</VBox>

 원리는 간단합니다. LineChart 를 넣어주고 그 안에 x축과 y축의 정보를 넣어줍니다. 축은 axis라고 부르는데 axis의 종류는 숫자 데이터로 이루어진 NumverAxis, 숫자 이외의 문자열이나 다른 데이터가 들어갈수 있는 Cateroty Axis가 있습니다..

 NumberAxis의 경우는 숫자데이터이기 때문에 최솟값, 최댓값, 눈금 단위를 적어주면 그래프의 축을 자동으로 그려줍니다. 그 옵션들이 각각 lowerBound, upperBound, tickUnit 인거죠. 

 

■ Java Code

 자 이제 fxml 코드를 띄워보겠습니다. Controller 클래스는 만들기만 해주시고 따로 작성할 코드는 없습니다. MainClass 에 아래와 같이 적어주고 한번 띄워보죠.

public class Main extends Application {
 
    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("chart.fxml"));
        primaryStage.setTitle("Chart Test");
        primaryStage.setScene(new Scene(root, 400, 400));
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}
 

■ 결과 화면

조금 허접한것 같긴 하지만 그래도 차트 같긴 하죠? 

 이번 시간에는 간단하게 띄워보기만 했는데 다음시간에는 데이터도 넣고 스타일도 좀 바꿔보겠습니다 !

 ■ Fix Error

 아 그런데 tickUnit을 5로 정하지 않았었나요?? 결과화면에는 값의 단위가 2.5로 되어있습니다. 이게 어떻게 된 일이죠?

 살펴보니 Axis에는 자동적으로 autoRange라는 속성이 true로 설정되어 있습니다. 말그대로 자동적으로 길이에 비례해서 tickUnit을 정해버린다는 것입니다. 해결방법은 아주 간단합니다. setAutoRanging을 false로 바꿔주면 되죠. 아래처럼 말입니다.

xAxis.setAutoRanging(false);
yAxis.setAutoRanging(false);
 

FXML 상에서도 가능합니다.

<NumberAxis lowerBound="0" upperBound="20" tickUnit="4" fx:id="xAxis" autoRanging="false"/>

 

 그럼 결과 화면은..

 정상적으로 뜹니다.