Пакет javafx.scene.chart

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

Предоставляются общие типы диаграмм, такие как 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;}

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

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