Question

我喜欢在我的CSS代码中使用-fx-bar-fill附带的条形样式。但是，有一种情况需要进行一些自定义（我需要一个系列＆＃39;条形图条纹而不仅仅是一种颜色）。但是，在不使用-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％。

Answer 2

James_D通过上面的帖子引导我回答。我只会添加（为了记录）他的java版本（8_u60）比我的更新（7_u75），它使用不同的CSS文件来设置条形图的样式。为了提供特定于我的java版本的答案（即，根据如何为我设置样式来获得我的确切结果），function getImg(img) { var container = document.getElementById("some-id"); var imgPath = 'imgs/' +img+ '.png'; container.src = imgPath; }的CSS如下：

-fx-bar-fill

JavaFX图表CSS属性＆＃34; -fx-bar-fill＆＃34; - 究竟是做什么的？

2 个答案: