javafx css样式_使用CSS设置JavaFX饼图样式

javafx css样式

渲染图表时， JavaFX默认提供某些颜色。 但是，在某些情况下，您想自定义这些颜色。 在此博客文章中，我将使用一个示例来更改JavaFX饼图的颜色，该示例打算在今天下午在2013年RMOUG培训日的演示中包括。一些基于Java的图表API提供了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样式的示例将导致输出，如下一个屏幕快照所示。 切片为不同的蓝色阴影，图例的背景为“ si色”。 请注意，例如，当我使用JavaFX“命名颜色”时，也可以对蓝色使用“＃0000ff”。

我的便利类ChartMaker和DbAccess没有在此处显示代码。 后者只是通过JDBC从Oracle数据库模式中检索图表的数据，而前者则将该数据转换为适合PieChart（ObservableList）构造函数的Observable集合。

这里需要注意的是，正如Andres Almiray所指出的那样 ，通常不适合像我在本博客和其他博客文章中所做的那样，从JavaFX UI主线程（又名JavaFX Application Thread）执行长时间运行的进程。例子。 我可以在这些文章中忽略它，因为示例很简单，数据库检索很快，并且图表呈现应用程序没有比该呈现更多的内容，因此很难观察到任何“悬挂”。 在以后的博客文章中，我打算探讨使用JavaFX javafx.concurrent包（ 在JavaFX的Concurrency中已经对此进行了很好的描述）来处理数据库访问（或任何长时间运行的操作）的更好方法。

JavaFX允许开发人员控制更多，而不仅仅是使用CSS绘制图表颜色。 两个非常有用的资源详细介绍了如何使用CSS样式化JavaFX图表，这是“ 使用JavaFX图表”部分的“ 用CSS样式化图表”和“ JavaFX CSS参考指南” 。 CSS作为一种样式化Web和移动应用程序的方法正变得越来越流行。 通过在JavaFX中支持CSS样式，可以轻松地将与它们共存的基于HTML的应用程序相同的样式应用于JavaFX应用程序。

参考：我们的JCG合作伙伴 Dustin Marx在Inspired by Actual Events博客上使用CSS设置JavaFX饼图样式 。

翻译自: https://www.javacodegeeks.com/2013/02/styling-javafx-pie-chart-with-css.html

javafx css样式