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

【问题标题】：How is it possible to reduce the size of a JavaFX Chart so it fits into a ListCell?如何减小 JavaFX 图表的大小以使其适合 ListCell？
【发布时间】：2017-12-19 15:42:40
【问题描述】：

我正在构建一个 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); 时，一切都会中断，图表不再可见。

【问题讨论】：

为此创建自己的图形（Pane 和 Path 或 Lines 的集合）实际上可能更容易，而不是尝试重用折线图。跨度>
那是我试图避免的：D
你试过了吗？它可能不会比您已经发布的代码多多少，只是为了让一些简单的工作。
如果到那时还没有人提出任何其他想法，我可能会在明天尝试。

标签： java css javafx linechart

【解决方案1】：

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

【讨论】：

感谢您的建议，这有点帮助，我现在将使用此方法。但是，我希望能够使用 LineChart 类中的一些功能，例如工具提示如果我将其转换为图像，则不能。