JavaFX条形图的CSS线性渐变答案

【问题标题】：CSS linear-gradient of JavaFX barchartJavaFX条形图的CSS线性渐变
【发布时间】：2019-11-27 13:02:29
【问题描述】：

我当前的样式模式是（{0} 被替换为条形特定颜色代码）

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,-30%)) "
+ "(100%, derive(-fx-bar-fill,-40%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,80%)) "
+ "(100%, derive(-fx-bar-fill, 0%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,30%)) "
+ "(100%, 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;";

看起来像这样：

问题是由于不推荐使用的linear 语法，我收到了解析器警告。我尝试将样式模式重构为linear-gradient，而不使用guide 更改结果，但我不明白。谁能解决这个问题？

【问题讨论】：

我相信下面的等价于第一个线性渐变：linear-gradient(from 0% 0% to 0% 100%, derive(-fx-bar-fill, -30%) 0%, derive(-fx-bar-fill, -40%) 100%);.
感谢@Slaw 的这个想法。不幸的是它不起作用。使用这种语法，我可以为渐变设置一些“步骤”。最大的问题是，这些步骤只是垂直的。我不知道如何在条的边界处获得水平渐变。
我只是在不推荐使用的语法中提供了一个单一的等效渐变，因此您可以进行比较以完成转换，尽管事后看来; 可能令人困惑。我以为您只是对 linear-gradient 语法有问题，但了解您有多个背景和不同插图的事实。如果不是这样，我很抱歉。不过，我很高兴您能够找到解决方案。

标签： java css javafx bar-chart linear-gradients

【解决方案1】：

已弃用的版本定义了三种背景。每个背景都以linear 开头。这些背景就像图层一样工作。所以我唯一要做的就是创建三个背景。我的第一个解决方案用 ; 分隔背景这会导致解析错误。背景必须用逗号分隔。通过使用-fx-background-insets 缩小绘图区域来创建条形边框。我的最终解决方案是

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg1
+ "derive(-fx-bar-fill, -30%), derive(-fx-bar-fill, -40%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg2
+ "derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg3
+ "derive(-fx-bar-fill, 30%), derive(-fx-bar-fill, -10%));"
+ "-fx-background-insets: 0,1,2;" // reducing drawing area for each bg
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;"

【讨论】：