Пакет javafx.scene.chart

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

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