Пакет javafx.scene.chart

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

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

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