Question

所以我已经在JavaFx应用程序上工作了一段时间（供公司内部使用），效果很好，但每当我向同事展示时，我总能得到回复和＃34;应用程序很棒，但为什么这么难看？＆＃34;所以我想寻找样式化的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中查找默认样式。至于您应该如何设置样式，这取决于您发现的漂亮东西，因此，建议您在Google上查找自己喜欢的图表并进行重构。

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

1 个答案: