文档



JavaFX:使用JavaFX UI组件

31 饼图

本章介绍一种以圆形划分成三角形楔形块(称为切片)来表示数据的图表。每个切片表示对应特定值的百分比。

图31-1显示了使用PieChart类创建的饼图。切片的颜色由添加到PieChart.Data数组的相应数据项的顺序定义。

图31-1 典型饼图

典型饼图
"图31-1 典型饼图"的描述

创建饼图

在JavaFX应用程序中创建饼图,至少需要实例化PieChart类,定义数据,将数据项分配给PieChart对象,并将图表添加到应用程序中。在创建图表数据时,为要显示的每个扇区定义尽可能多的PieChart.Data对象。每个PieChart.Data对象有两个字段:饼图扇区的名称和对应的值。示例31-1创建了基本的饼图。

示例31-1 创建饼图

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.chart.*;
import javafx.scene.Group;
 
public class PieChartSample extends Application {
 
    @Override public void start(Stage stage) {
        Scene scene = new Scene(new Group());
        stage.setTitle("进口水果");
        stage.setWidth(500);
        stage.setHeight(500);
 
        ObservableList<PieChart.Data> pieChartData =
                FXCollections.observableArrayList(
                new PieChart.Data("葡萄柚", 13),
                new PieChart.Data("橙子", 25),
                new PieChart.Data("李子", 10),
                new PieChart.Data("梨子", 22),
                new PieChart.Data("苹果", 30));
        final PieChart chart = new PieChart(pieChartData);
        chart.setTitle("进口水果");

        ((Group) scene.getRoot()).getChildren().add(chart);
        stage.setScene(scene);
        stage.show();
    }
 
    public static void main(String[] args) {
        launch(args);
    }
}

编译和运行此应用程序的结果如图31-2所示。

图31-2 进口水果图表

典型饼图
"图31-2 进口水果图表"的描述

除了基本设置外,示例31-1通过调用setTitle方法指定了图表的标题。

设置饼图和图例

饼图的默认视图包括饼图、标签和图例。标签的值是从PieChart.Data对象的name字段中获取的。您可以使用setLabelsVisible方法来管理标签的外观。同样,您可以通过调用setLegendVisible方法来管理图例的外观。

您可以改变标签和图例的位置。使用setLabelLineLength方法,您可以指定饼图周长和标签之间的线的长度。使用setLegendSide方法来改变图例相对于饼图的默认位置。在示例31-2中演示了如何将这些方法应用于示例31-1中创建的图表。

示例31-2 改变标签和图例的位置

chart.setLabelLineLength(10);
chart.setLegendSide(Side.LEFT);

将这些代码添加到应用程序中,编译并运行后的结果如图31-3所示。

图31-3 饼图图例和标签的替代位置

饼图图例和标签的替代位置。
图31-3 饼图图例和标签的描述

您的应用程序可能需要改变饼图中切片的放置方向。默认情况下,切片是顺时针放置的。但是,您可以通过为setClockwise方法指定false值来改变这一点chart.setClockwise(false)。结合使用setStartAngle方法,可以实现切片的所需位置。图31-4展示了当为chart对象调用setStartAngle(180)方法时,饼图的外观如何改变。

图31-4 改变饼图切片的起始角度

图31-4的描述如下
图31-4 改变饼图切片的起始角度的描述

处理饼图的事件

虽然饼图的切片不是一个Node对象,但是每个PieChart.Data元素都有一个与之关联的节点,可以用来分析事件并相应地处理它们。在示例31-3中显示的代码片段创建了一个EventHandler对象,用于处理落入特定图表切片的MOUSE_PRESSED事件。

示例31-3 处理饼图的鼠标事件

final Label caption = new Label("");
caption.setTextFill(Color.DARKORANGE);
caption.setStyle("-fx-font: 24 arial;");

for (final PieChart.Data data : chart.getData()) {
    data.getNode().addEventHandler(MouseEvent.MOUSE_PRESSED,
        new EventHandler<MouseEvent>() {
            @Override public void handle(MouseEvent e) {
                caption.setTranslateX(e.getSceneX());
                caption.setTranslateY(e.getSceneY());
                caption.setText(String.valueOf(data.getPieValue()) + "%");
             }
        });
}

当您将此代码片段添加到应用程序代码中并编译运行时,应用程序开始对鼠标点击做出反应。在图31-5中,当用户点击相应的切片时,显示了梨的值。

图31-5 处理饼图的鼠标按下事件

图31-5的描述如下
"图31-5 处理饼图的鼠标按下事件"的描述

通过使用这种编码模式,您可以处理各种事件或将视觉效果应用于整个图表以及其切片。

相关API文档 

关闭窗口

目录

JavaFX:使用JavaFX UI组件

展开 折叠