JavaFX charts propriété CSS "- fx-bar-fill " - que fait-il exactement?
J'aime le style des barres qui vient avec l'utilisation de -fx-bar-fill dans mon code CSS. Cependant, il y a une situation qui nécessite un peu de personnalisation (j'ai besoin que l'une des barres de ma série ait un motif rayé au lieu d'une simple couleur). Cependant, sans utiliser -fx-bar-fill, les barres perdent un certain nombre de propriétés au-delà de la couleur, ce qui les empêche de correspondre.
Qu'est-ce que fait exactement -fx-bar-fill? Quelles sont les propriétés individuelles telles que je peux ré-appliquer manuellement, si possible?
Avec -fx-bar-fill, vous ne spécifiez qu'une seule couleur. De là, il semble ensuite ajouter:
(de Travail)
- Un dégradé linéaire basé sur la couleur spécifiée (
-fx-background-color: linear-gradient()) - Une couleur de bordure légèrement plus foncée que la couleur spécifiée (
-fx-border-color: linear-gradient())
(Ne fonctionne pas complètement)
- Un dégradé linéaire de lueur intérieure légèrement plus léger que la couleur spécifiée (
-fx-effect: innershadow(three-pass-box,#00FF00,2,0,0,0);?)
Je n'arrive pas à répliquer complètement la lueur intérieure sur un dégradé. Est-il une autre façon de le faire? Y a-t-il d'autres effets dans -fx-bar-fill que je pourrais manquer?
Version agrandie:
2 answers
-fx-bar-fill n'est pas une propriété, mais une couleur recherchée (essentiellement une variable CSS qui contient une valeur de couleur; voir la documentation CSS pour le type de couleur et faites défiler vers le bas juste après la table des échantillons de couleurs prédéfinis).
Cette couleur recherchée est utilisée pour définir la propriété -fx-background-color des barres du graphique à barres, qui sont implémentées sous forme de régions. À partir du code source pour modène.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;
}
Cela définit donc la valeur de -fx-bar-fill sur une autre couleur recherchée, CHART_COLOR_1 (plus dans un instant), puis définit la couleur d'arrière-plan des barres du graphique à barres en un dégradé linéaire (très subtil) dont les arrêts de couleur sont basés sur sa valeur.
Les couleurs des barres d'autres séries sont définies différemment en redéfinissant la valeur de -fx-bar-fill pour les barres de ces autres séries:
.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; }
Et ces couleurs individuelles sont définies comme
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;
Le résultat net est donc que, pour la première série, la barre commence sur le bord gauche avec une couleur 4% plus foncée que #f3622d, éclaircit (de manière non linéaire) jusqu'à #f3622d au centre, puis s'assombrit de 6% jusqu'au bord droit.
James_D m'a conduit à la réponse avec son post ci-dessus. Je voudrais seulement ajouter (pour mémoire) que sa version java (8_u60) est plus récente que la mienne (7_u75), qui utilise un fichier CSS différent pour styliser les graphiques à barres. Pour fournir la réponse spécifique à ma version java (c'est-à-dire pour obtenir mon résultat exact en termes de style des barres pour moi), le CSS pour le -fx-bar-fill est le suivant:
.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;
}