java - 如何减小 JavaFX 图表的大小使其适合 ListCell？

Question

我正在构建一个 JavaFX 应用程序，我想放置几个非常小的 LineChart进入ListView得到这样的东西: 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;
}

单元格绑定(bind)到 ObservableList<XYChart.Series> .当我尝试调用 this.setPrefHeight(17); 时单元格上的一切都中断了，图表不再可见。

Answer 1

您可以使用 Node 类中的 snapshot 方法获取每个图表的 WriteableImage 并将其显示在您的 ListCell 中。