如何在折线图中设置边框颜色

Question

我有一个折线图。我想给图形区域的矩形边框上色。

"-fx-border-color：黑色透明透明透明；"为 x 轴或 y 轴添加边框。

"-fx-border-color: black" 为整个图表添加边框。

但我只需要在图形区域周围设置边框，如附件所示

任何帮助都会很有用。

谢谢

Answer 1

边框 CSS

.chart-plot-background {
    -fx-border-color: red; 
    -fx-border-style: solid; 
    -fx-border-width: 4px;
    -fx-border-insets: -2px;
}

给你这个：

图表内容周围的绿色边框是上面的 CSS 提供的。

虚线

您会注意到在绿色边框的顶部绘制了虚线和轴。也许你想要那些线后面的边框，也许你想要它在上面，也许你根本不想画那些虚线。

如果虚线后面的边框很好，则无需执行任何其他操作。

如果不想画虚线，可以去掉：

lineChart.setAlternativeRowFillVisible(false);
lineChart.setAlternativeColumnFillVisible(false);
lineChart.setHorizontalGridLinesVisible(false);
lineChart.setVerticalGridLinesVisible(false);

并相应地调整边界矩形的插图：

.chart-plot-background {
    -fx-border-color: forestgreen; 
    -fx-border-style: solid; 
    -fx-border-width: 4px; 
    -fx-border-insets: 0 0 0 1;
}

如果您想保留虚线并在图表顶部绘制矩形，则可以将图表放在 StackPane 中，在图表显示后运行chart.lookup(".chart-plot-background")，监控生成的图表背景的边界节点并在堆栈顶部添加一个新矩形，该矩形绑定到图表背景边界，如layout bounds demo。不过你可能不想这样做。

如何自己做这些事情

使用 ScenicView 或 SceneBuilder 中的 css 分析器之类的工具，或研究 JRE 随附的 jfxrt.jar 中的 CSS reference guide 或 modena.css 文件，可以帮助您确定所需的 CSS 规则。

Answer 2

您可以在您的 css 文件中进行测试：

/* chart background */
.chart-plot-background {
   -fx-background-color: blue;
}
/* frame background */
.chart{
   -fx-background-color: pink;
}
/* border content */
.chart-content{
  -fx-padding: 0px;
  -fx-border-color: black;
  -fx-border-width: 3px;
}