1

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

更长的版本：

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

示例图表

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

期望结果示例

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

4

1 回答 1

2

不是那么优雅，硬编码但直接的方式似乎再次与 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");
于 2013-07-03T17:08:57.080 回答