如何在树表中绘制时间线

Question

我正在编写一个分析器来直观地查看我的应用程序在哪里花费时间。我试图实现的界面（见下文）类似于带有

的树表

• 表示响应时间的行或框。
• 像图一样成为可折叠的树
• 能够在表格列中显示指标（例如，开始时间、成本等）
• 能够在左侧显示标签或描述和指标，在右侧显示线条

我在 R 中创建了以下图表（见下文）——不幸的是，虽然图表生成是自动化的，但该方法不是交互式的。我想知道你是否可以提出一个更好的方法——也许是一个树表。我查看了许多 Swing、JavaFx 树表示例。我还没有看到在树表中有行（时间线）的示例。

任何建议将不胜感激。提前致谢。

Answer 1

您可以使用 javaFX 中的 grahic 属性在 TreeTableCell 中显示任何节点。这包括Rectangles。

这是一个使用Rectangles在列中显示条形的简单示例：

// Arrays in TreeItems contain {startValue, endValue} (both positive)
TreeItem<int[]> root = new TreeItem<>(new int[]{0, 10});
root.getChildren().addAll(new TreeItem<>(new int[]{0, 5}), new TreeItem<>(new int[]{5, 10}));
TreeTableView<int[]> ttv = new TreeTableView<>(root);

// Column displaying bars based on data of TreeItem. Do not use this as
// the first column, otherwise the alignment be off depending on the
// distance to the root.
TreeTableColumn<int[], int[]> column = new TreeTableColumn<>();
column.setCellValueFactory(c -> c.getValue().valueProperty());

final double BAR_SIZE = 20;
column.setCellFactory((t) -> new TreeTableCell<int[], int[]>() {

    // the bar
    private final Rectangle rectangle = new Rectangle(0, 10);

    {
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);

        // bar invisible by default
        rectangle.setVisible(false);
        setGraphic(rectangle);
    }

    @Override
    protected void updateItem(int[] item, boolean empty) {
        super.updateItem(item, empty);
        if (!empty && item != null) {
            // resize and display bar, it item is present
            rectangle.setWidth((item[1] - item[0]) * BAR_SIZE);
            rectangle.setTranslateX(item[0] * BAR_SIZE);
            rectangle.setVisible(true);
        } else {
            // no item -> hide bar
            rectangle.setVisible(false);
        }
    }
});

// add a columns new column
// add a additional empty column at the start to prevent bars being
// aligned based on distance to the root
ttv.getColumns().addAll(new TreeTableColumn<>(), column);

你需要做的事情

• 使用不同于int[]的数据类型；单元格值工厂和TreeTableCell需要相应调整；可以找到更复杂模型的示例，例如在oracle教程中：https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/tree-table-view.htm
• 选择更好的颜色；这些颜色可以例如存储在Map 中，并在需要时创建。
• 添加其他列