使用CSS设置JavaFX饼图样式

渲染图表时， JavaFX默认提供某些颜色。但是，在某些情况下，您想自定义这些颜色。在此博客文章中，我将使用一个示例来更改JavaFX饼图的颜色，该示例打算在今天下午在RMOUG Training Days 2013的演示中包括。一些基于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();@Overridepublic 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();@Overridepublic 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 athttp://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没有在此处显示代码。后者只是通过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饼图样式。