JavaFX 2. Введение в Charts

В данном уроке, я хочу познакомить Вас с графиками в JavaFX. Расскажу основы построения, возможности, а также рассмотрим на примере, как они реализуются

Знакомство с типами графиков

Все графики находятся в пакете javafx.scene.chart. Сейчас существует несколько поддерживаемых типов графиков которые можно построить:

1. 1. bar (гистограмма)
2. 2. area (диаграмма с областями)
3. 3. line (график)
4. 4. bubble (пузырьковая диаграмма)
5. 5. scatter (точечная диаграмма)
6. 6. pie (круговая диаграмма)

Эти типы относятся к двум большим категориям. Те, которые используют оси X и Y и те, которым они не нужны.

XYChart – родительский класс для всех, кто использует две оси координат. В этот список попадают:

1. 1. area
2. 2. line
3. 3. bar
4. 4. scatter
5. 5. bubble

И для построения графика который не использует оси, а такой у нас один – PIE используется соответственно класс PieChart

Инициализация данных

XYChart.Data – класс для задания данных графику.

xValue, yValue – свойства, которые инициализируют значение по X и Y, соответственно.

XYChart.Series – класс, который позволит создать несколько графиков на полотне. Каждую серию можно подписать дав ей индивидуальное название.

PieChart.Data – для инициализации данных круговой диаграммы.

Возможности графиков

Хотел бы заметить, что графики отменны не только красивым видом, а и тем, что очень функциональные и гибкие.

1. 1. Вы можете изменять положение подписи полотна, размещая его в любом с четырех направлений
2. 2. Также, изменять название и положение подписей конкретного графика
3. 3. Возможность отхватить событие произведенное на графике. (Например кликом на конкретной точке можем вывести информацию за интересующий нас период)
4. 4. Создание анимированных графиков. График, динамически изменяется при изменении данных.
5. 5. Кроме всего этого, вы можете задавать собственный стиль графиков, используя для украшения css стили.

Я думаю вы успели заметить, что кроме приятного дизайна графики имеют здесь достаточно хороший функционал. А если Вам будет не хватать кастомных возможностей, то всегда можно наследоваться от Chart и определить свой вид графика, удобен для Вас.

Создание графика с осями

package sample;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("JavaFX Chart (Series)");

        NumberAxis x = new NumberAxis();
        NumberAxis y = new NumberAxis();

        LineChart<Number, Number> numberLineChart = new LineChart<Number, Number>(x,y);
        numberLineChart.setTitle("Series");
        XYChart.Series series1 = new XYChart.Series();
        XYChart.Series series2 = new XYChart.Series();
        series2.setName("cos(x)");
        series1.setName("sin(x)");
        ObservableList<XYChart.Data> datas = FXCollections.observableArrayList();
        ObservableList<XYChart.Data> datas2 = FXCollections.observableArrayList();
        for(int i=0; i<20; i++){
            datas.add(new XYChart.Data(i,Math.sin(i)));
            datas2.add(new XYChart.Data(i,Math.cos(i)));
        }

        series1.setData(datas);
        series2.setData(datas2);

        Scene scene = new Scene(numberLineChart, 600,600);
        numberLineChart.getData().add(series1);
        numberLineChart.getData().add(series2);
        primaryStage.setScene(scene);

        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Шаг 1.

На данном шаге, мы создадим область(полотно) для графика, заполним список данных для построения кривой.

LineChart<Number, Number> numberLineChart = new LineChart<Number, Number>(x,y); – область для линейного графика. (полотно)
XYChart.Series series1 = new XYChart.Series(); – серия данных будет хранится тут. Если вам нужно отобразить несколько графиков на одном полотне
ObservableList datas = FXCollections.observableArrayList(); – список данных для построения графика

Заполняем наши списки данными:

for(int i=0; i<20; i++){
    datas.add(new XYChart.Data(i,Math.sin(i)));
    datas2.add(new XYChart.Data(i,Math.cos(i)));
}

Шаг 2.

Получив два списка с данными, можем добавить их на полотно

series1.setData(datas); – присваиваем сцене список данных

numberLineChart.getData().add(series1); – добавляем серию на полотно

Шаг 3.

Завершающим этапом будет помещение сцены на главную сцену, помост(primaryStage).

Scene scene = new Scene(numberLineChart, 600,600); – помещаем наше полотно на сцену

primaryStage.setScene(scene); – добавляем сцену

В итоге получим два графика синуса и косинуса.

Попробуем изменить этот тип графика на другой. Всего ничего понадобиться изменить одну строчку.

NumberAxis x = new NumberAxis();
NumberAxis y = new NumberAxis();

AreaChart<Number, Number> numberLineChart = new AreaChart<Number, Number>(x,y);
numberLineChart.setTitle("Series");
XYChart.Series series1 = new XYChart.Series();
XYChart.Series series2 = new XYChart.Series();

Также быстро можно изменить тип графика на точечный или пузырьковый, изменив полотно на котором мы рисуем за одну строчку.

ПОХОЖИЕ ПУБЛИКАЦИИ

None Found