JavaFX圖表CSS屬性「-fx-bar-fill」 - 它究竟做了什麼？

我喜歡在我的CSS代碼中使用-fx-bar-fill附帶的酒吧樣式。然而，有一種情況需要一些定製（我需要我的一個系列的酒吧有條紋圖案，而不是僅僅一種顏色）。但是，如果沒有使用-fx-bar-fill，那麼酒吧的顏色就會超出一些屬性，導致它們不匹配。JavaFX圖表CSS屬性「-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有沒有其他影響，我可能會失蹤？

放大版本：

來源

2015-10-06 IDontWorkAtNASA

回答如何說明' -fx-bar-fill'的作品。但是，當我運行示例時，我看不到像你描述的邊框。你可以發佈一個[MCVE]來顯示你正在做什麼來獲得邊界（並更清楚地解釋你的問題）？ –

可能是因爲java版本的不同。我在1.7.0_75上運行這個，它使用caspian.css？ *編輯：*是的！看起來就像這樣:) – IDontWorkAtNASA

-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（多一會兒），然後定義條形圖中條的背景顏色爲（非常微妙）線性漸變，其顏色停止是基於其值。

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

所以網：

顏色在其他系列棒由這些等系列重新定義-fx-bar-fill值酒吧設置不同結果是，對於第一系列，條從左邊開始，顏色比#f3622d顏色暗4％，在中心點亮（以非線性方式）到#f3622d，然後在右邊變暗6％邊緣。

來源

2015-10-07 14:02:15

James_D帶我到他的帖子上面的答案。我只會添加（用於記錄）他的java版本（8_u60）比我的（7_u75）更新，它使用不同的CSS文件來設計條形圖的樣式。爲了提供具體到我的Java版本的答案（即獲得我的確切結果的酒吧是如何稱呼對我而言），爲-fx-bar-fill的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; 
}

來源

2015-10-07 22:43:33 IDontWorkAtNASA

JavaFX圖表CSS屬性「-fx-bar-fill」 - 它究竟做了什麼？

回答

相關問題