JavaFX Chartのサイズを縮小してListCellに収める方法はありますか？

Question

私はJavaFXアプリケーションを構築していると私はこのような何かを得るためにListViewにいくつかの非常に小さなLineChartを入れたい：私の現在の試みで What I want it to look like

私はListViewコントロール内で正しくチャートを得ることができたのが、これまでのところ、私は希望のサイズにそれらに合うように失敗しました：ここWhat it currently looks like

は私のカスタムのlistcell実装です：詰め物を除去するための

//similar to: 
//https://stackoverflow.com/questions/31151281/javafx-linechart-as-a-cell-in-treetableview 
public class ChartListCell extends ListCell<LineChart.Series> { 

    private CategoryAxis xAxis = new CategoryAxis(); 
    private NumberAxis yAxis = new NumberAxis(); 
    private LineChart<String, Number> chart = new LineChart<>(xAxis, yAxis); 

    public ChartListCell() { 
     //a bunch of visual configuration similar to 
     //https://stackoverflow.com/questions/41005870/how-to-make-the-chart-content-area-take-up-the-maximum-area-available-to-it 

     chart.setMaxHeight(17.0); 
    } 

    @Override 
    public void updateItem(XYChart.Series item, boolean empty) { 
     super.updateItem(item, empty); 
     if (empty) { 
      setGraphic(null); 
      setText(null); 
     } else { 
      setGraphic(chart); 
      if (!chart.getData().contains(item)) 
       chart.getData().setAll(item); 
     } 
    } 
} 

CSSスタイリング：

.chart{ 
    -fx-padding: 0px; 
} 
.chart-content{ 
    -fx-padding: 0px; 
} 
.chart-series-line{ 
    -fx-stroke-width: 2px; 
    -fx-effect: null; 
    -fx-stroke: #009682; 
} 
.axis{ 
    AXIS_COLOR: transparent; 
} 
.axis:top > .axis-label, 
.axis:left > .axis-label { 
    -fx-padding: 0; 
} 
.axis:bottom > .axis-label, 
.axis:right > .axis-label { 
    -fx-padding: 0; 
} 

細胞はObservableList<XYChart.Series>に結合している。 セル上でthis.setPrefHeight(17);に電話をかけようとすると、グラフが表示されなくなります。

Answer 1

Nodeクラスのsnapshotメソッドを使用して、各チャートのWriteableImageを取得し、ListCellに表示することができます。