JavaFX图表CSS属性“-“fx条填充”—；它到底做什么？

我喜欢在我的CSS代码中使用

-fx bar fill

所附带的条样式。然而，有一种情况需要进行一些定制（我需要我的一个系列的条形图具有条纹图案，而不仅仅是颜色）。但是，如果不使用

-fx bar fill

，这些条会失去颜色以外的许多属性，导致它们不匹配

-fx bar fill

的确切功能是什么？如果可能，我可以手动重新应用哪些单独属性

使用

-fx bar fill

，您只能指定一种颜色。从那以后，它似乎又加上了：

（工作）

• 基于指定颜色的线性渐变（

  -fx背景色：linear-gradient（）

  ）
• 比指定颜色稍暗的边框颜色（

  -fx border color:linear-gradient（）

  ）

（未完全工作）

• 内部辉光线性渐变比指定颜色稍亮（

  -fx效果：内部阴影（三通框，#00FF00,2,0,0,0）；

  ？）

我似乎无法完全复制渐变上的内部辉光。还有别的办法吗？

-fx bar fill

中是否有我可能缺少的其他效果

缩放版本：

---

-fx bar fill

不是一个属性，而是一种查找颜色（本质上是一个保存颜色值的CSS变量；请参见，并向下滚动到预定义色样表的旁边）

此查找颜色用于设置条形图中条形图的

-fx background color

属性，条形图作为区域实现。从：

因此，这将

-fx bar fill

的值设置为另一种查找颜色，

图表颜色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;

因此，最终的结果是，对于第一个系列，条形图从左边缘开始，颜色比

#f362d

暗4%，然后（以非线性方式）在中间变亮到

#f362d

，然后在右边缘变暗6%。

通过他的帖子，我找到了答案。我只想补充一点（记录在案），他的java版本（8_u60）比我的（7_u75）更新，后者使用不同的CSS文件来设置条形图的样式。为了提供特定于我的java版本的答案（即，为了获得关于如何为我设置条样式的确切结果），

-fx条填充的CSS如下所示：

.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;
}

回答时说明了
-fx bar fill
的工作原理。然而，当我运行一个示例时，我没有看到您描述的边界。您是否可以发布一篇文章来说明您正在做什么来获得这个边界（并更清楚地解释您的问题）？可能是因为java版本的差异。我在1.7.0_75上运行这个，它使用caspian.css？编辑：是的！看起来就是这样：）
.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;
}