JavaFX 图表 CSS 属性 "-fx-bar-fill"— 它究竟做了什么？

Question

我喜欢在我的 CSS 代码中使用 -fx-bar-fill 带来的条形样式。但是，有一种情况需要进行一些定制(我需要我的系列中的一个条具有条纹图案，而不仅仅是一种颜色)。但是，如果不使用 -fx-bar-fill，条形会失去许多属性，而不仅仅是颜色，导致它们不匹配。

-fx-bar-fill 到底是做什么的？如果可能的话，我可以手动重新应用它们的个别属性是什么？

使用 -fx-bar-fill，您只需指定一种颜色。似乎从那里添加:

(工作)

• 基于指定颜色的线性渐变 (-fx-background-color: linear-gradient())
• 边框颜色比指定颜色稍深(-fx-border-color: linear-gradient())

(未完全工作)

• 内部发光线性渐变比指定颜色略亮(-fx-effect: innershadow(three-pass-box,#00FF00,2,0,0,0);?)

我似乎无法在渐变上完全复制内部发光。还有另一种方法吗？ -fx-bar-fill 中是否还有我可能遗漏的其他效果？

放大版:

Answer 1

-fx-bar-fill 不是属性，而是查找的颜色(本质上是一个保存颜色值的 CSS 变量；请参阅 CSS documentation for the color type 并向下滚动到表格旁边预定义颜色样本)。

此查找颜色用于设置条形图中条形的 -fx-background-color 属性，这些条形以区域形式实现。来自source code for modena.css :

.chart-bar {
    -fx-bar-fill: CHART_COLOR_1;
    -fx-background-color:   linear-gradient(to right, 
                                derive(-fx-bar-fill, -4%),
                                derive(-fx-bar-fill, -1%),
                                derive(-fx-bar-fill, 0%),
                                derive(-fx-bar-fill, -1%),
                                derive(-fx-bar-fill, -6%)
                              );
    -fx-background-insets: 0;
}

所以这会将 -fx-bar-fill 的值设置为另一种查找颜色 CHART_COLOR_1(稍后会详细介绍)，然后定义背景颜色条形图中的条形变为(非常微妙的)线性渐变，其颜色停止基于其值。

通过为其他系列中的柱重新定义 -fx-bar-fill 的值，其他系列中柱的颜色设置不同:

.default-color0.chart-bar { -fx-bar-fill: CHART_COLOR_1; }
.default-color1.chart-bar { -fx-bar-fill: CHART_COLOR_2; }
.default-color2.chart-bar { -fx-bar-fill: CHART_COLOR_3; }
.default-color3.chart-bar { -fx-bar-fill: CHART_COLOR_4; }
.default-color4.chart-bar { -fx-bar-fill: CHART_COLOR_5; }
.default-color5.chart-bar { -fx-bar-fill: CHART_COLOR_6; }
.default-color6.chart-bar { -fx-bar-fill: CHART_COLOR_7; }
.default-color7.chart-bar { -fx-bar-fill: CHART_COLOR_8; }

那些单独的颜色被定义为

CHART_COLOR_1: #f3622d;
CHART_COLOR_2: #fba71b;
CHART_COLOR_3: #57b757;
CHART_COLOR_4: #41a9c9;
CHART_COLOR_5: #4258c9;
CHART_COLOR_6: #9a42c8;
CHART_COLOR_7: #c84164;
CHART_COLOR_8: #888888;

因此最终结果是，对于第一个系列，条形图从左边缘开始，颜色比 #f3622d 深 4%，然后(以非线性方式)变亮到 #f3622d 在中心，然后向右边缘变暗 6%。