Question

我的可视化中有一个JavaFX BubbleChart，我需要能够在图表的每个气泡中创建/显示文本。在我的可视化中，我有许多XYChart.Series，每个系列只有1个气泡。对于每个系列，我做＆＃34; series.setName（＆＃34; xxxx＆＃34;）;＆＃34; （其中xxxx =唯一系列名称），我需要能够在气泡中显示该系列名称。

我已经为气泡图实现了一个显示系列名称的工具提示（鼠标悬停事件），但我还需要在气泡内部显示文本而不需要鼠标悬停。

为了让代码能够起作用，这里有一个5系列的基本例子。我如何在每个泡泡中添加文字？

谢谢。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
<section class="parallax-bg-1 text-center" style="background-image:url('https://killtheboredomdotcom.files.wordpress.com/2015/08/skyline-of-rome.jpg?w=1920&h=768&crop=1')">
        <h1 class="">Welcome</h1>

        <p class="lead">subtitle</p>
    </section>
</div>
</div>

}

Answer 1

从数据中获取的节点是Stackpane，Stackpane的形状为Ellipse。您可能需要x方向的椭圆半径，并向Stackpane添加标签。但是你需要设置Label的minWidth属性，否则它只会显示三个点。并且您需要一个属性来保存动态字体大小，因为如果您想要调整图表大小，它应该看起来很漂亮。

您无需太多代码即可完成这项工作：

    for (XYChart.Series<Number, Number> series : bc.getData()) {
        for (XYChart.Data<Number, Number> data : series.getData()) {
            Node bubble = data.getNode();
            if (bubble != null && bubble instanceof StackPane) {
                StackPane region = (StackPane) bubble;
                if (region.getShape() != null && region.getShape() instanceof Ellipse) {
                    Ellipse ellipse = (Ellipse) region.getShape();
                    DoubleProperty fontSize = new SimpleDoubleProperty(10);

                    Label label = new Label(series.getName());
                    label.setAlignment(Pos.CENTER);
                    label.minWidthProperty().bind(ellipse.radiusXProperty());
                    //fontSize.bind(Bindings.when(ellipse.radiusXProperty().lessThan(40)).then(6).otherwise(10));
                    fontSize.bind(Bindings.divide(ellipse.radiusXProperty(), 5));
                    label.styleProperty().bind(Bindings.concat("-fx-font-size:", fontSize.asString(), ";"));
                    region.getChildren().add(label);
                }
            }
        }
    }

更新

James_D提到，如果改变，例如Shape，循环不是很强大。所以我已经改变了一点来要求椭圆实例。这有点像BubbleChart的原始layoutPlotChildren方法。

在JavaFX BubbleChart的Bubble中创建文本

1 个答案:

更新