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样式