Пакет javafx.scene.chart

Интерфейс JavaFX предоставляет набор компонентов диаграмм, которые являются очень удобным способом визуализации данных. Разработчики приложений могут использовать эти готовые графические диаграммы, предоставляемые JavaFX runtime, для визуализации широкого спектра данных.

Предоставляются общие типы диаграмм, такие как Bar, Line, Area, Pie, Scatter и Bubble диаграммы. Эти диаграммы легко создавать и настраивать. API JavaFX Charts ориентирован на визуализацию, а не на модель.

Диаграммы JavaFX поддерживают анимацию компонентов диаграммы и автоматическое масштабирование осей диаграммы. Кроме того, как и другие элементы управления пользовательского интерфейса JavaFX, визуальные компоненты диаграмм могут быть стилизованы с помощью CSS. Таким образом, существуют несколько общедоступных визуальных свойств, которые можно стилизовать с помощью CSS. Пример приведен ниже в документе.

Ниже приведена таблица, в которой перечислены существующие типы диаграмм и краткое описание их предполагаемого использования.

Класс Chart является базовым классом для всех диаграмм. Он отвечает за отрисовку фона, рамки, заголовка и легенды. Его можно расширить для создания пользовательских типов диаграмм. Класс XYChart является базовым классом для всех диаграмм с двумя осями и расширяет класс Chart. Он в основном отвечает за отрисовку двух осей и фона области диаграммы. Большинство диаграмм расширяют класс XYChart, за исключением PieChart, который расширяет Chart, так как это не диаграмма с двумя осями.

Пакет javafx.scene.chart содержит классы осей, которые можно использовать при создании диаграмм с двумя осями. Класс Axis является абстрактным базовым классом всех осей диаграммы. CategoryAxis строит строковые категории, где каждое значение является уникальной категорией на оси. NumberAxis строит диапазон чисел с основными метками через каждый интервал tickUnit.

Например, BarChart строит данные из последовательности объектов XYChart.Series. Каждый ряд содержит объекты XYChart.Data.

     // add data
     XYChart.Series<String,Number> series1 = new XYChart.Series<String,Number>();
     series1.setName("Data Series 1");
     series1.getData().add(new XYChart.Data<String,Number>("2007", 567));
 

Мы можем определить больше подобных объектов серии. Следующий фрагмент кода демонстрирует, как создать BarChart с 3 категориями и осями X и Y:

     static String[] years = {"2007", "2008", "2009"};
     final CategoryAxis xAxis = new CategoryAxis();
     final NumberAxis yAxis = new NumberAxis();
     final BarChart<String,Number> bc = new BarChart<String,Number>(xAxis, yAxis);
     xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList(years)));
     bc.getData().addAll(series1, series2, series3);
 

Диаграммы JavaFX хорошо подходят для реального времени или динамической визуализации диаграмм (например, онлайн-акций, трафика веб-сайтов и т. д.) из наборов данных в реальном времени. Вот пример динамической диаграммы, созданной с использованием смоделированных данных. Используется Timeline для моделирования динамических данных для изменения стоимости акций во времени (часы).

     private XYChart.Series<Number,Number> hourDataSeries;
     private NumberAxis xAxis;
     private Timeline animation;
     private double hours = 0;
     private double timeInHours = 0;
     private double prevY = 10;
     private double y = 10;

     // timeline to add new data every 60th of a second
     animation = new Timeline();
     animation.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / 60), new EventHandler<ActionEvent>() {
         @Override public void handle(ActionEvent actionEvent) {
             // 6 minutes data per frame
             for(int count = 0; count < 6; count++) {
                 nextTime();
                 plotTime();
             }
         }
     }));
     animation.setCycleCount(Animation.INDEFINITE);
     xAxis = new NumberAxis(0, 24, 3);
     final NumberAxis yAxis = new NumberAxis(0, 100, 10);
     final LineChart<Number,Number> lc = new LineChart<Number,Number>(xAxis, yAxis);

     lc.setCreateSymbols(false);
     lc.setAnimated(false);
     lc.setLegendVisible(false);
     lc.setTitle("ACME Company Stock");

     xAxis.setLabel("Time");
     xAxis.setForceZeroInRange(false);
     yAxis.setLabel("Share Price");
     yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, "$", null));

     hourDataSeries = new XYChart.Series<Number,Number>();
     hourDataSeries.setName("Hourly Data");
     hourDataSeries.getData().add(new XYChart.Data<Number,Number>(timeInHours, prevY));
     lc.getData().add(hourDataSeries);

     private void nextTime() {
         if (minutes == 59) {
             hours++;
             minutes = 0;
         } else {
             minutes++;
         }
         timeInHours = hours + ((1d/60d) * minutes);
     }

     private void plotTime() {
         if ((timeInHours % 1) == 0) {
             // change of hour
             double oldY = y;
             y = prevY - 10 + (Math.random() * 20);
             prevY = oldY;
             while (y < 10 || y > 90) y = y - 10 + (Math.random() * 20);
             hourDataSeries.getData().add(new XYChart.Data<Number, Number>(timeInHours, prevY));
             // after 25hours delete old data
             if (timeInHours > 25) hourDataSeries.getData().remove(0);
             // every hour after 24 move range 1 hour
             if (timeInHours > 24) {
                 xAxis.setLowerBound(xAxis.getLowerBound() + 1);
                 xAxis.setUpperBound(xAxis.getUpperBound() + 1);
             }
         }
     }
 

Метод start должен вызвать animation.play(), чтобы запустить смоделированную динамическую диаграмму.

Обратитесь к документации пакета javafx.scene.control по стилизации CSS. Пример стилизации диаграммы с помощью CSS выглядит следующим образом: для установки фона содержимого диаграммы в определенный цвет:

.chart-content { -fx-background-color: cyan;}

Цвет линии на линейной диаграмме можно стилизовать следующим образом:

.chart-series-line { -fx-stroke: green; -fx-stroke-width: 4px;}