带有CSS代码的样式Javafx图表的示例

Question

所以我已经在Javafx应用程序上工作了一段时间（用于我的公司的内部使用），但每当我向同事展示它时，我总是得到回应："应用程序很棒，但是为什么如此丑陋？"，所以我想寻找样式的Javafx图表的示例，除了Oracle文档外，我真的没有找到任何东西。

我已经在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中查找默认样式。至于您应该如何设置它，这取决于您发现的漂亮的东西，因此我建议您在Google上查找图表并重建它。