我正在构建一个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);
时,一切都会中断,图表不再可见。
您可以使用snapshot
类中的Node
方法获取每个图表的WriteableImage
,并在ListCell中显示。