DOC-03-38 在图表中使用CSS

本章中解释了如何通过应用层叠样式表(CSS)来改变JavaFX图表的默认外观。你将学到如何改变图表的配色方案,修改其图例或坐标轴,以及修改图表符号。

JavaFX图表中所有的视觉元素都由modena样式表定义。JavaFX API中有一个受限的方法和属性集来改变这些视觉元素。Oracle建议你在JavaFX应用程序中使用图表特有的CSS属性来实现改变图表的外观。

你可以在JavaFX CSS参考指南(JavaFX CSS Reference Guid)中找到完整的图表特有属性清单。如果你希望对图表应用CSS样式,可以参考第四部分《在JavaFX应用中使用CSS样式来管理外观》(Skinning JavaFXApplications with CSS)来获取更多的实现细节。

修改基本的图表元素

所有的JavaFX图表都有一些公共属性,它们可以通过.chart、.chart-content、.chart-title、和.chart-legend样式类来设置。图38-1展示了图表中对应的区域。

38-1 图表的视觉元素

3-38-1 css-chart-elements

你可以改变并设置这些元素的以下视觉特征:

· 内外边距

· 背景颜色和背景图片

· 字体

· 字体填充颜色

在默认情况下,所有的图表都有一个5像素的内边距,并且它的内容(Content)都有10像素的内边距。你可以通过.chart和.chart-content CSS类的-fx-padding属性来改变这些值,如例38-1所示。

38–1设置图表内边距

图38-2展示了折线图在这些样式被应用之后的样子。

38-2 设置图表的顶级CSS属性

3-38-2 css-chart-padding

你可以为图表定义一个背景颜色或背景图片。例38-2展示了添加-fx-background-image属性来设置背景图片。

38–2设置背景图片

由于设置的icon.png比折线图要小,所以设置的图片会在剩下的区域中重复填充。图38-3展示了设置了背景图片的折线图。

38-3 带有背景图的折线图

3-38-3 css-background

在图38-3中折线图的图例具有默认的外观。你可以通过修改在.chart-legend CSS类中定义的属性来改变图例的默认外观,如例38-3所示。

38-3 设置图例

当你应用这些样式时,图表的图例会被渲染成透明背景,对应的标签会使用深蓝色来绘制,而图例符号会变成方形,如图38-4所示。

38-4 改变图例

3-38-4 css-legend

在默认情况下,由于图例被声明为高为5像素、宽为5像素、半径也为5像素的圆角矩形,因此图例符号看起来是圆形。如果你将半径严格指定为0,那么圆形就会变成方形。你也可以通过-fx-shape属性来定义图例符号。例如,下面的代码行通过指定SVG路径创建了一个三角形:-fx-shape: “M5,0 L10,8 L0,8 Z.”。

要改变图表的文本元素,你可以使用如例38-4所示的对应样式。.chart-title类设置了图表标题的填充颜色和字体大小。.axis-label类定义了坐标轴标签的填充颜色。

38–4 修改文本元素的颜色

对外观进行这些改变后的运行结果如图38-5所示。

38–5被修改过文本元素的折线图

3-38-5 css-text

改变图表绘图区的颜色

当你改变图表的默认背景颜色或者设置背景图片时,对应的改变并不会影响图像本身。根据modena样式表中的设定,双轴图表的绘图区具有一个浅灰色的背景,并且它的交替行是灰色的。你可以使用.chart-plot-background类中的-fx-background-color和-fx-background-image属性来设置绘图区的背景。例38-5定义了绘图区的背景色、可选行的填充色以及横向和纵向网格线的颜色。

38–5为图表绘图区设置背景色

图38-6 展示了带有修改后的绘图区背景的折线图。

38-6  绘图区带有交替行颜色的折线图

3-38-6 css-plot

当你在设计图表时,如果希望绘图区与图表的其它区域具有相同的背景,可以为绘图区和交替行设置透明的背景,如例38-6所示。

38–6 为图表绘图区设置透明背景

在JavaFX应用程序的图表中,你可以通过使用setAlternativeRowFillVisible(false)方法来使交替行变得不可见。

在应用了透明背景色之后,图表的外观会变得如图38-7所示。

38–7 带有透明绘图区背景的折线图

3-38-7 css-plot2

设置坐标轴

尽管Axis类提供了设置刻度标记和标签的方法与属性,你仍可以使用对应的CSS类和属性来定义这些图表元素的外观。

不妨考虑修改在气泡图一章中的样例程序,通过删除或注释下面的代码行来禁用为刻度标签设置的颜色:

· xAxis.setTickLabelFill(Color.CHOCOLATE);
· yAxis.setTickLabelFill(Color.CHOCOLATE);

然后将例38-7中所示的代码片段添加到程序的CSS文件中。

38-7 定义图表坐标轴的样式

这个样式表定义了坐标轴标签和刻度标签的相对字体大小,字体家族和填充色。它还设置了刻度标记和次刻度标记的长度。在这些样式被应用到图表上之后,它看起来将如图38-8所示。

38-8 坐标轴外观被修改过的气泡图

3-38-8 css-axis

例38-7改变了刻度标记和次刻度标记的长度默认值。你可以通过定义新的配色方案来继续改变图表的外观,如例38-8所示。在这个例子中将主刻度标记设置为3像素宽,因此它们看起来会比次刻度标记要粗一些。

38-8 改变刻度标记和次要刻度标记的颜色

图38-9展示了当你修改了图表中刻度标记的颜色和宽度后坐标轴所发生的改变。

38-9 修改刻度标记的颜色方案和宽度

3-38-9 css-tick-mark

设置图表颜色

改变图表的默认颜色是为你的JavaFX应用程序提供一个独特风格的简单方法。本节内容中描述了为一些基本类型的图表设置可选色彩方面的一些信息。

在默认情况下,modena样式表中为排在前面的八组数据所对应的线条定义了八种颜色。当添加到折线图中的数据超过八组时,剩下的线条颜色会在.chart-series-line CSS类中定义。

使用.chart-series-line类和.default-color<x>.chart-series-line类来改变线条的风格。在例38-9中定义的样式为三组数据所对应的线条设置了新的颜色,移除了默认的效果,并且指定宽度为2像素。

38–9为折线图中的三组数据设置可选颜色

图38-10展示了此样式被应用后的折线图。

38–10 线条色彩被修改后的折线图

3-38-10 css-color-line

注意图表数据组的图例仍是使用了默认的色彩。这是由于对应的改变并没有被应用到图表符号之上。例38-10展示了如何改变图例中数据组的颜色。

38–10 改变图表符号颜色

你可以通过比较图38-10和图38-11来观察图例的变化。

38-11 修改了线条和图例符号颜色的折线图

3-38-11 css-color-line2

当你在一个分区图中改变颜色时,需要考虑三个图形组件:每组数据的分区,对应的边界线和图表符号。在默认情况下,modena样式表为8组数据分别定义了配色方案,包括它们的分区、线条和符号的颜色。默认的样式还设置了8组之外的数据对应的分区、线条和符号的颜色。

例38-11展示了如何改变与三组数据对应的分区的默认配色方案。

38–11 为一个分区图创建新的配色方案

注意粗体字部分的值。这些粗体字为分区设置了新的不透明度。默认情况下,所有的分区的不透明度值都是0.17。例38-11为分区重新分配了不透明度,这样第一个分区具有最低的不透明度等级,而第三个分区具有最高的不透明度等级。注意使用带有不透明度值的16进制值颜色表示法并不是一个标准的W3C CSS格式。如果要保持与W3C的要求一致,则需要使用rgba CSS函数,它的第4个参数为不透明度。图38-12展示了当这些样式被应用后是如何改变图表的外观的。

38–12 带有修改后的配色方案的分区图

3-38-12 css-color-area

例38-12展示了modena样式表中为柱状图所有的长条定义的基本样式。这些样式为背景色创建了一个线性渐变,另外还设置了半径使得所有的长条边缘是圆角。

38–12 柱状图的默认样式

对背景不仅可以设置颜色、渐变和特效。你还可以为每个数据组设置背景图。为了实现这个任务,可以先按照例38-13所示简化BarChartSample样例程序。

38-13 简化后的柱形图样例

现在按例38-14所示定义图表的样式表。

38-14 为长条的背景增加图片

这个样式表为每个数据组都设置了一个背景图,并且定义了图片在长条内部的位置。图38-13展示了在新样式生效后BarChartSample程序的运行界面。

38-13 使用图片来填充柱状图

3-38-13 css-color-bar

当你在JavaFX应用程序中构建饼图时,你一般需要为饼图的扇区设置备选颜色。你可以通过设置.default-color<x>.chart-pie CSS类来重新定义默认的配色方案。例38-15实现了这个任务。

38–15 为饼图设置颜色

饼图的颜色现在与它们所表示的水果的颜色一样。另外,在例38-15中的样式表为标签和图例设置了备选颜色。你可以在图38-14中观察新的样式。

38–14 重新定义了扇区颜色的饼图

3-38-14 css-color-pie

改变图表符号

虽然在modena样式表中定义了显示在图例中的符号,但是你可以通过修改默认的配色方案和符号形状来改变它们的外观。例38-11改变了分区图的符号颜色。你可以将下面的代码行添加到样式中来使符号的形状变成方形的:.chart-area-symbol{-fx-background-radius: 0;}。在默认情况下,背景的半径为5像素。如果将背景的半径改为0,则会将圆形变成方形。这样的改变对所有的数据组都会生效,如图38-15所示。

38-15 修改了图表符号的分区图

3-38-15 css-symbol-area

在散布图中,所有的数据均由点的集合表示。每一个数据组都有其特定的符号。默认情况下,modena样式为七个数据组分别定义了七种符号,并且为其它数据组定义了基本符号。例38-16展示了散布图的默认样式。

38–16 Modena样式表中定义的散布图样式

你可以使用CSS类和可用的CSS属性来改变散布图的符号,也可以创建自定义符号来表示数据。

使用.default-color1.chart-symbol CSS类来为第二组数据改变符号的默认颜色与形状,如例38-17所示。

38-17 为第二组数据重新定义符号形状

当这个样式被应用到散布图之中时,如图38-16所示,第二组数据对应的点将会表现为一个对勾符号。而其它数据组对应的点则会根据默认样式来进行展示。

38-16 使用新的对勾符号标记来展示第二组数据的散布图

3-38-16 css-symbol-scatter2

使用.chart-symbol类来为散布图中所有的数据组设置新的图表符号,如例38-18所示。

38-18 为散布图定义一个备选符号

图38-17展示了一个带有七组数据的散布图。每组数据都由不同颜色的对勾标记来表示。各组数据的颜色都从modena样式表继承而来。

38-17 使用对勾标记作为图表符号的散布图

3-38-17 css-symbol-scatter

总而言之,当你需要在JavaFX应用程序中为一张图表设置样式的时候,可以考虑如下步骤:

· 向JavaFX应用程序中增加一个.css文件

· 明确你需要改变的图表的图形元素

· 选择对应的CSS类

· 设置选定的CSS类的属性,指定属性值来获得所需的外观

如果需要了解更多关于使用CSS来设置JavaFX应用程序样式的信息,可以参考上一章《在UI控件上使用CSS》。

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_chartcss/
百度已收录