[JavaFX] JavaFX Line Chart 데이터 삽입 방법

JavaFX Line Chart 데이터 삽입 

 이번 시간에는 지난 시간에 이어서 LineChart에 실제 데이터를 넣는 방법을 알아보겠습니다. 차트 만드는 방법은 이전 포스트를 참고해주시면 됩니다. 

 그럼 일단 차트에 넣을 데이터를 만들어보죠. LineChart의 상위 클래스인 XYChart 를 살펴보게 되면 data를 넣는 방법은

1.  getData() 후에 add(), addAll() 과 같은 메소드를 활용하는 방법.

2.  setData() 를 통해 데이터를 세팅 해주는 방법.

 위와 같은 형태로 이루어 집니다. 그런데 이때 넣어줘야 하는 데이터 형식도 다릅니다. 아래와 같이 말입니다.

1,  XYChart.Series<X, Y> list;

2. ObservableList<XYChart.Series<X, Y>> list;

 차이를 아시겠나요 ? getData()를 통해서 add 해주는 경우는 Series list 하나, 즉 데이터 line 하나씩을 넣을수 있는데 반해 setData()를 통한 방법은 1개 이상의 Series들을 ObservableList에 담아서 한번에 넣어줘야 합니다.

 저는 간단하게 setData() 방법을 이용해서 데이터를 세팅해보겠습니다. 만든 데이터는 아래와 같습니다. 

        ObservableList<XYChart.Series<Number, Number>> list = FXCollections.observableArrayList();
 
        XYChart.Series series1 = new XYChart.Series();
        series1.setName("First Data");
        series1.getData().add(new XYChart.Data(1, 3));
        series1.getData().add(new XYChart.Data(2, 4));
        series1.getData().add(new XYChart.Data(3, 5));
        series1.getData().add(new XYChart.Data(4, 4));
        series1.getData().add(new XYChart.Data(5, 4));
        series1.getData().add(new XYChart.Data(6, 6));
        series1.getData().add(new XYChart.Data(7, 2));
        series1.getData().add(new XYChart.Data(8, 5));
        series1.getData().add(new XYChart.Data(9, 3));
        series1.getData().add(new XYChart.Data(10, 7));
        series1.getData().add(new XYChart.Data(11, 9));
        series1.getData().add(new XYChart.Data(12, 5));
 
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("Second Data");
        series2.getData().add(new XYChart.Data(1, 13));
        series2.getData().add(new XYChart.Data(2, 14));
        series2.getData().add(new XYChart.Data(3, 15));
        series2.getData().add(new XYChart.Data(4, 14));
        series2.getData().add(new XYChart.Data(5, 14));
        series2.getData().add(new XYChart.Data(6, 16));
        series2.getData().add(new XYChart.Data(7, 12));
        series2.getData().add(new XYChart.Data(8, 15));
        series2.getData().add(new XYChart.Data(9, 13));
        series2.getData().add(new XYChart.Data(10, 17));
        series2.getData().add(new XYChart.Data(11, 19));
        series2.getData().add(new XYChart.Data(12, 15));
        list.addAll(series1, series2);

 

 이제 Controller를 통해서 데이터를 넣어주겠습니다. 컨트롤러 클래스는 아래와 같이 작성하시면 됩니다. 

public class Controller implements Initializable{
    @FXML
    private VBox root;
    @FXML
    private NumberAxis xAxis;
    @FXML
    private NumberAxis yAxis;
    @FXML
    private LineChart lineChart;
    @Override
    public void initialize(URL location, ResourceBundle resources) {
        //위의 데이터를 넣어주세요
        lineChart.setData(list);
    }
 
}

 

■ 결과 화면

 결과는 아래와 같습니다.

 다음 시간에는 Chart를 스타일링 하는 방법, Chart의 각 컨텐츠에 대해서 알아보도록 하겠습니다.