使用JavaFX替換圖表圖例/分層圖表

縮短版本：是否可以偏移JavaFX中的圖表圖例，即左對齊底部圖例或將圖例從中心偏移20px？通過JavaFX文檔或通用Google搜索，無論是Java代碼還是CSS，看起來都不可能。使用JavaFX替換圖表圖例/分層圖表

加長版：

比方說，例如，我有一個顯示上的發言權三相交流電源的利用率，4個不同的斷路器的圖表。我想要顯示電路的總利用率以及「單個圖表」上每個單獨階段使用的百分比。所以，我採取兩種不同的條形圖和堆棧他們結束了類似下面：

Example chart

但是，由於整體利用率和利用階段在不同的圖表，它們有不同的傳說。由於階段圖位於整個圖表的頂部，因此我們無法看到整個利用率圖表的圖例。那麼，有沒有可能抵消兩種傳說，使兩者都是可見的，如下面的圖像中（它的照片編輯）：

Example of desired result

這是可能的，或者這只是一個愚蠢的做法，如在，有沒有更好的方式來獲得這個或其他類似的結果？任何想法將不勝感激。

來源

2013-07-03 Paul Marshall

不那麼優雅，硬編碼而直接的方式似乎再次與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; 
}

通過設置IDS使用它們：

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

來源

2013-07-03 17:08:57

不知道我是多麼懷念/間隔上填充作爲解決方案，但它是。雖然有點笨重，但它完成了工作。謝謝！作爲一個方面說明，通過向右側添加左側填充，我可以將其移過來，以便圖例保持居中在圖表下方，而沒有一堆填充物粘到一邊。看起來有點清潔。所以不是'-fx-padding：6px;'，而是''-fx-padding：6px，6px，6px，100px;'在右邊。 –

@PaulMarshall。不客氣，是的，另一種對稱的方式也適用。 –

使用JavaFX替換圖表圖例/分層圖表

回答

相關問題