java JavaFX图表CSS属性“fxbarfill”-它具体做什么？

11 月 Questions & Answers 1163

我喜欢在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中是否有我可能缺少的其他效果

缩放版本：

.chart-bar { -fx-bar-fill: #22bad9; -fx-background-color: linear-gradient(derive(-fx-bar-fill,-30%), derive(-fx-bar-fill,-40%)), linear-gradient(derive(-fx-bar-fill,80%), derive(-fx-bar-fill, 0%)), linear-gradient(derive(-fx-bar-fill,30%), derive(-fx-bar-fill,-10%)); -fx-background-insets: 0,1,2; -fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0; }

# 2 楼答案

-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%

Python中文网

有 Java 编程相关的问题?

java JavaFX图表CSS属性“fxbarfill”-它具体做什么？

共 (2) 个答案

# 1 楼答案

# 2 楼答案