css - 使用 CSS 代码的样式化 javafx 图表示例

Question

所以我在 JavaFx 应用程序(供我公司内部使用)上工作了一段时间，效果很好，但每当我向同事展示它时，我总是得到回应“这个应用程序很棒，但为什么这么难看？” ，所以我去寻找样式化的 Javafx 图表的示例，除了 Oracle 文档，我真的什么也没找到，对于按钮 Oracle 发布了一个非常好的帖子- here ，但与 JavaFx 图表没有任何相似之处。

我已经在 Google 的图片库中查找示例，但除了 Oracle 文档外，几乎什么都没有。

有没有好心人贴出一段漂亮的 CSS 代码来结束这种尴尬？ 我附上了我当前的 CSS 代码，不幸的是我没有足够的声誉来发布图像(应用程序的快照)。 对我当前的 CSS 的任何建议修改也都很棒。

  #appContainer {
    -fx-background-color: linear-gradient(to bottom, #464646, #5f5f5f);
     -fx-spacing:30;
}

.button {
    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 6;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: white;
    -fx-font-size: 12px;
    -fx-spacing:30;

}

.button:hover{

    -fx-background-color: linear-gradient(black, white);


}
.combo-box {
    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 3,2,2,2;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: -fx-text-base-color;
    -fx-font-size: 12px;
}

.combo-box:hover{

    -fx-background-color: white;


}

#buttonMenuContainer {
    -fx-background-color: linear-gradient(to bottom, #737373, #595959);
    -fx-padding: 10px;
     -fx-spacing:30;
}

.chart-title {
 -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-text-fill: #F8F8F8 ;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
 }

.chart-alternative-row-fill {
    -fx-fill: transparent;
    -fx-stroke: transparent;
    -fx-stroke-width: 0;
}

.chart-vertical-grid-lines {
    -fx-stroke: transparent;
}
.chart-horizontal-grid-lines {
    -fx-stroke: transparent;
}

.axis {
  -fx-text-fill: #4682b4;
}

.chart {
    -fx-padding: 10px;
     -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);

            -fx-text-fill:  white;
}

.chart-plot-background{
-fx-padding:0px;
-fx-font-family: Verdana;
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
}
.chart-content{
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-padding:30px;
-fx-border-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-border-width: 5;
-fx-border-insets: -5;
}

.CategoryAxis{
 -fx-color:black;   

}

.chart-legend{
   -fx-background-color:white;

}

.axis {
    -fx-font-size: 1.4em;    
    -fx-tick-label-fill: black;
    -fx-font-family: Tahoma;
    -fx-tick-length: 20;
    -fx-minor-tick-length: 10;
}

.chart-series-line {    
    -fx-stroke-width: 2px;
  }

.default-color0.chart-series-line { -fx-stroke: black; }
.default-color1.chart-series-line { -fx-stroke: white }
.default-color2.chart-series-line { -fx-stroke: blue }

default-color0.chart-line-symbol { -fx-background-color: black, white; }
.default-color1.chart-line-symbol { -fx-background-color: white, white; }
.default-color2.chart-line-symbol { -fx-background-color: blue, white; }

.chart-legend { -fx-background-color: linear-gradient(gray, white);
 -fx-font: Arial;
-fx-font-size: 20px;
    -fx-text-fill: #F8F8F8 ;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );

}

.pane {
    -fx-background-color: #8fbc8f;
}

Answer 1

您可以在 caspian.css 中查找默认样式，如果你想知道什么是可能的风格。至于你应该如何设计它，这取决于你觉得漂亮的东西，所以我建议你在谷歌上查找你喜欢的图表并重建它。