Пакет javafx.scene.chart

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

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

Диаграммы 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;}

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

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