Статьи

Стилизация круговой диаграммы JavaFX с помощью CSS

Ноябрь 17, 2018

JavaFX предоставляет определенные цвета по умолчанию при рендеринге диаграмм. Однако бывают ситуации, когда хочется настроить эти цвета. В этой записи блога я расскажу об изменении цвета круговой диаграммы JavaFX на примере, который я собираюсь включить в свою презентацию сегодня днем ​​на RMOUG Training Days 2013.

Некоторые API для построения диаграмм на основе Java предоставляют методы Java для установки цветов. JavaFX, рожденный во времена распространенности HTML5, вместо этого использует каскадные таблицы стилей (CSS), чтобы позволить разработчикам настраивать цвета, символы, размещение, выравнивание и другие стилистические проблемы, используемые в их диаграммах. Я демонстрирую использование CSS для изменения цвета здесь.

В этой статье я рассмотрю два примера кода, демонстрирующие простые приложения JavaFX, которые отображают круговые диаграммы на основе данных из образца схемы Oracle «hr». В первом примере не указываются цвета, поэтому используются стандартные цвета JavaFX для секторов круговой диаграммы и фона легенды. Этот пример показан ниже.

EmployeesPerDepartmentPieChart (стиль JavaFX по умолчанию)

package rmoug.td2013.dustin.examples;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * Simple JavaFX application that generates a JavaFX-based Pie Chart representing
 * the number of employees per department.
 * 
 * @author Dustin
 */
public class EmployeesPerDepartmentPieChart extends Application
{
   final DbAccess databaseAccess = DbAccess.newInstance();

   @Override
   public void start(final Stage stage) throws Exception
   {
      final PieChart pieChart =
         new PieChart(
            ChartMaker.createPieChartDataForNumberEmployeesPerDepartment(
               this.databaseAccess.getNumberOfEmployeesPerDepartmentName()));
      pieChart.setTitle("Number of Employees per Department");
      stage.setTitle("Employees Per Department");
      final StackPane root = new StackPane();
      root.getChildren().add(pieChart);
      final Scene scene = new Scene(root, 800 ,500);
      stage.setScene(scene);
      stage.show();
   }

   public static void main(final String[] arguments)
   {
      launch(arguments);
   }
}

Когда вышеуказанное простое приложение выполняется, появляется вывод, показанный на следующем снимке экрана.

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

EmployeesPerDepartmentPieChartWithCssStyling (индивидуальные стили CSS)
 

package rmoug.td2013.dustin.examples;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * Simple JavaFX application that generates a JavaFX-based Pie Chart representing
 * the number of employees per department and using style based on that provided
 * in CSS stylesheet chart.css.
 * 
 * @author Dustin
 */
public class EmployeesPerDepartmentPieChartWithCssStyling extends Application
{
   final DbAccess databaseAccess = DbAccess.newInstance();

   @Override
   public void start(final Stage stage) throws Exception
   {
      final PieChart pieChart =
         new PieChart(
            ChartMaker.createPieChartDataForNumberEmployeesPerDepartment(
               this.databaseAccess.getNumberOfEmployeesPerDepartmentName()));
      pieChart.setTitle("Number of Employees per Department");
      stage.setTitle("Employees Per Department");
      final StackPane root = new StackPane();
      root.getChildren().add(pieChart);
      final Scene scene = new Scene(root, 800 ,500);
      try
      {
         scene.getStylesheets().add("chart.css");
      }
      catch (Exception ex)
      {
         System.err.println("Cannot acquire stylesheet: " + ex.toString());
      }
      stage.setScene(scene);
      stage.show();
   }

   public static void main(final String[] arguments)
   {
      launch(arguments);
   }
}

chart.cssФайл отображается в следующем:

chart.css 

/*
   Find more details on JavaFX supported named colors at
   http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#typecolor
*/

/* Colors of JavaFX pie chart slices. */
.data0.chart-pie { -fx-pie-color: turquoise; }
.data1.chart-pie { -fx-pie-color: aquamarine; }
.data2.chart-pie { -fx-pie-color: cornflowerblue; }
.data3.chart-pie { -fx-pie-color: blue; }
.data4.chart-pie { -fx-pie-color: cadetblue; }
.data5.chart-pie { -fx-pie-color: navy; }
.data6.chart-pie { -fx-pie-color: deepskyblue; }
.data7.chart-pie { -fx-pie-color: cyan; }
.data8.chart-pie { -fx-pie-color: steelblue; }
.data9.chart-pie { -fx-pie-color: teal; }
.data10.chart-pie { -fx-pie-color: royalblue; }
.data11.chart-pie { -fx-pie-color: dodgerblue; }

/* Pie Chart legend background color and stroke. */
.chart-legend { -fx-background-color: sienna; }

Выполнение этого примера в стиле CSS приводит к выводу, как показано на следующем снимке экрана. Кусочки разных оттенков синего цвета, а фон легенды — «сиенна». Обратите внимание, что хотя я использовал JavaFX «именованные цвета», я также мог бы использовать, например, «# 0000ff» для синего цвета.

Я не показывал код здесь для моих удобных классов ChartMakerи DbAccess. Последний просто извлекает данные для диаграмм из схемы базы данных Oracle через JDBC, а первый преобразует эти данные в коллекции Observable, подходящие для конструктора PieChart (ObservableList) .

Важно отметить , что, как Андрес Almiray имеет Указал , он обычно не ассигновать выполнить давно запущенные процессы из основного интерфейса JavaFX (Тема AKA JavaFX Application) , как я сделал в этом и других других блоге Примеры. Я могу сойти с рук в этих постах, потому что примеры просты, поиск в базе данных быстрый, и приложение для визуализации диаграмм не намного больше, чем это рендеринг, поэтому трудно наблюдать «зависание». В будущем сообщении в блоге я намереваюсь рассмотреть лучший способ обработки доступа к базе данных (или любого длительного действия) с помощью пакета JavaFX javafx.concurrent (который уже хорошо описан в Concurrency in JavaFX ).

JavaFX позволяет разработчикам контролировать гораздо больше, чем просто отображать цвета с помощью CSS. Два очень полезных ресурса, подробно описывающих, что можно сделать для стилизации диаграмм JavaFX с помощью CSS, — это раздел « Использование диаграмм JavaFX » « Стилирование диаграмм с помощью CSS» и Справочное руководство по CSS для JavaFX . CSS становится все более популярным в качестве подхода к стилизации веб-приложений и мобильных приложений. Поддерживая стилизацию CSS в JavaFX, к приложениям JavaFX можно легко применить те же стили, что и к приложениям на основе HTML, с которыми они могут сосуществовать.

42
Share: