31 饼图
本章介绍一种以圆形划分成三角形楔形块(称为切片)来表示数据的图表。每个切片表示对应特定值的百分比。
图31-1显示了使用PieChart
类创建的饼图。切片的颜色由添加到PieChart.Data
数组的相应数据项的顺序定义。
创建饼图
在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-1通过调用setTitle
方法指定了图表的标题。
设置饼图和图例
饼图的默认视图包括饼图、标签和图例。标签的值是从PieChart.Data
对象的name字段中获取的。您可以使用setLabelsVisible
方法来管理标签的外观。同样,您可以通过调用setLegendVisible
方法来管理图例的外观。
您可以改变标签和图例的位置。使用setLabelLineLength
方法,您可以指定饼图周长和标签之间的线的长度。使用setLegendSide
方法来改变图例相对于饼图的默认位置。在示例31-2中演示了如何将这些方法应用于示例31-1中创建的图表。
将这些代码添加到应用程序中,编译并运行后的结果如图31-3所示。
您的应用程序可能需要改变饼图中切片的放置方向。默认情况下,切片是顺时针放置的。但是,您可以通过为setClockwise
方法指定false
值来改变这一点chart.setClockwise(false)
。结合使用setStartAngle
方法,可以实现切片的所需位置。图31-4展示了当为chart
对象调用setStartAngle(180)
方法时,饼图的外观如何改变。
处理饼图的事件
虽然饼图的切片不是一个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中,当用户点击相应的切片时,显示了梨的值。
通过使用这种编码模式,您可以处理各种事件或将视觉效果应用于整个图表以及其切片。
相关API文档