Question

简短版本：是否可以在JavaFX中偏移图表图例，即左对齐底部图例或将图例偏移20px偏离中心？通过查看JavaFX文档或只是一般的Google搜索，使用Java代码或CSS看起来都不可能。

更长的版本：

我们假设，例如，我有一张图表显示了4个不同的断路器的3相交流电源利用率。我想在“一张图表”上显示电路的总利用率百分比和每个阶段使用的百分比。因此，我采用两个不同的条形图并将它们堆叠起来，结果如下所示：

Example chart

但是，由于整体利用率和阶段利用率在不同的图表中，因此它们具有不同的图例。由于相图在整个图表的顶部，我们无法看到整体利用率图表的图例。那么，是否有可能偏移到两个图例，以便两者都可见，如下图所示（它是照片编辑的）：

Example of desired result

这是可能的，还是这只是一种愚蠢的方法，因为有没有更好的方法来获得这个或其他类似的结果？任何想法都将不胜感激。

Answer 1

不那么优雅，硬编码但直截了当的方式似乎再次使用CSS：

 /* The default css of chart legend in caspian. */
.chart-legend {
   -fx-background-color:  #cccccc, #eeeeee;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px;
}

/* We customize the above default background-color to transparent for 
   the chart legend on the right side, in our own CSS file. */
#my-legend-on-the-right-side .chart-legend {
   -fx-background-color: transparent;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px;
}

/* Then we customize the legend on the left side by padding 
   it to the left while its background covers the legend on the right. */
#my-legend-on-the-left-side .chart-legend {
   -fx-background-color:  #cccccc, #eeeeee;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px 300px 6px 6px;
}

通过设置ID来使用它们：

barChartTotal.setId("my-legend-on-the-left-side");
barChartPhases.setId("my-legend-on-the-right-side");

使用JavaFX抵消图表图例/分层图表

1 个答案: