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;
}

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

Answer 1

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

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

1 个答案: