Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

JavaFXعرض البيانات باستخدام الكلاس PieChart

المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني دائري ( Pie Chart ) باستخدام الكلاس PieChart.

المثال الأول

Main.java
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.chart.PieChart.Data;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس
PieChart pieChart = new PieChart();
// يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس
ObservableList<Data> chartData = FXCollections.observableArrayList
(
new PieChart.Data("Iphone X", 25),
new PieChart.Data("Nokia Lumia 1020", 12),
new PieChart.Data("Huawei P30", 26),
new PieChart.Data("Samsung S9", 24),
new PieChart.Data("Google Pixel 3", 16)
);
// الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن
pieChart.setTitle("Mobile Sales 2019");
// حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن
pieChart.setData(chartData);
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن pieChart هنا قمنا بإضافة الكائن
root.getChildren().addAll(pieChart);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 340);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX Pie Chart");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.chart.PieChart; import javafx.scene.chart.PieChart.Data; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { // يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس PieChart pieChart = new PieChart(); // يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس ObservableList<Data> chartData = FXCollections.observableArrayList ( new PieChart.Data("Iphone X", 25), new PieChart.Data("Nokia Lumia 1020", 12), new PieChart.Data("Huawei P30", 26), new PieChart.Data("Samsung S9", 24), new PieChart.Data("Google Pixel 3", 16) ); // الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن pieChart.setTitle("Mobile Sales 2019"); // حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن pieChart.setData(chartData); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // root في الكائن pieChart هنا قمنا بإضافة الكائن root.getChildren().addAll(pieChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 400, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX Pie Chart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

مثال حول الكلاس PieChart في JavaFX


المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان و تحديد طول الخطوط بين كل جزء في الرسم الدائري و العنوان الموضوع له.
فعلياً, قمنا باستخدام الدالة setLegendSide() و تمرير الثابت Side.LEFT لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليسار.
و قمنا باستخدام الدالة setLabelLineLength() لتحديد طول الخطوط بين كل جزء في الرسم الدائري و العنوان الموضوع له.

المثال الثاني

Main.java
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.chart.PieChart.Data;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس
PieChart pieChart = new PieChart();
// يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس
ObservableList<Data> chartData = FXCollections.observableArrayList
(
new PieChart.Data("Iphone X", 25),
new PieChart.Data("Nokia Lumia 1020", 12),
new PieChart.Data("Huawei P30", 26),
new PieChart.Data("Samsung S9", 24),
new PieChart.Data("Google Pixel 3", 16)
);
// الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن
pieChart.setTitle("Mobile Sales 2019");
// حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن
pieChart.setData(chartData);
// هنا قمنا بتحديد طول الخطوط الموضوعة بين كل جزء في الرسم البياني و العنوان الموضوع له
pieChart.setLabelLineLength(15);
// هنا جعلنا حاوية دليل الألوان تظهر يسار الرسم البياني
pieChart.setLegendSide(Side.LEFT);
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن pieChart هنا قمنا بإضافة الكائن
root.getChildren().addAll(pieChart);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 550, 320);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX PieChart");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.geometry.Side; import javafx.scene.Scene; import javafx.scene.chart.PieChart; import javafx.scene.chart.PieChart.Data; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { // يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس PieChart pieChart = new PieChart(); // يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس ObservableList<Data> chartData = FXCollections.observableArrayList ( new PieChart.Data("Iphone X", 25), new PieChart.Data("Nokia Lumia 1020", 12), new PieChart.Data("Huawei P30", 26), new PieChart.Data("Samsung S9", 24), new PieChart.Data("Google Pixel 3", 16) ); // الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن pieChart.setTitle("Mobile Sales 2019"); // حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن pieChart.setData(chartData); // هنا قمنا بتحديد طول الخطوط الموضوعة بين كل جزء في الرسم البياني و العنوان الموضوع له pieChart.setLabelLineLength(15); // هنا جعلنا حاوية دليل الألوان تظهر يسار الرسم البياني pieChart.setLegendSide(Side.LEFT); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // root في الكائن pieChart هنا قمنا بإضافة الكائن root.getChildren().addAll(pieChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 550, 320); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX PieChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

تعديل طريقة ظهور كائن الـ PieChart في JavaFX


المثال التالي يعلمك طريقة عرض قيمة كل جزء في الرسم البياني الدائري عند تمرير الفأرة فوقه.

المثال الثالث

Main.java
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.PieChart;
import javafx.scene.chart.PieChart.Data;
import javafx.scene.control.Label;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
// يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس
PieChart pieChart = new PieChart();
// يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس
ObservableList<Data> chartData = FXCollections.observableArrayList
(
new PieChart.Data("Iphone X", 25),
new PieChart.Data("Nokia Lumia 1020", 12),
new PieChart.Data("Huawei P30", 26),
new PieChart.Data("Samsung S9", 24),
new PieChart.Data("Google Pixel 3", 16)
);
// الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن
pieChart.setTitle("Mobile Sales 2019");
// حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن
pieChart.setData(chartData);
// عند تمرير الفأرة فوقه pieChart لأننا سنستخدمه لعرض نسبة كل جزء في الكائن Label هنا قمنا بإنشاء كائن من الكلاس
Label caption = new Label("");
// caption هنا قمنا بتحديد لون و حجم خط النص الكائن
caption.setTextFill(Color.BLACK);
caption.setStyle("-fx-font: 16 Tahoma;");
// هنا قمنا بتحديد ما سيحدث عند تمرير الفأرة فوق أي جزء في الرسم البياني
pieChart.getData().forEach((data) -> {
// هنا قلنا أنه سيتم جلب قيمة الجزء و عرضها فوق سهم الفأرة
data.getNode().addEventHandler(MouseEvent.MOUSE_MOVED, (MouseEvent e) -> {
caption.setTranslateX(e.getX());
caption.setTranslateY(e.getY()-20);
caption.setText(data.getPieValue() + "%");
});
});
// في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
StackPane root = new StackPane();
// root في الكائن caption و pieChart هنا قمنا بإضافة الكائنين
root.getChildren().addAll(pieChart, caption);
// فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
Scene scene = new Scene(root, 400, 340);
// هنا وضعنا عنوان للنافذة
stage.setTitle("JavaFX PieChart");
// أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
stage.setScene(scene);
// هنا قمنا بإظهار النافذة
stage.show();
}
// هنا قمنا بتشغيل التطبيق
public static void main(String[] args) {
launch(args);
}
}
import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.chart.PieChart; import javafx.scene.chart.PieChart.Data; import javafx.scene.control.Label; import javafx.scene.input.MouseEvent; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage stage) { // يمثل الرسم البياني الذي نريد إضافته في النافذة PieChart هنا قمنا بإنشاء كائن من الكلاس PieChart pieChart = new PieChart(); // يمثل عناوين و نسب البيانات التي نريد عرضها في الرسم البياني Observableهنا قمنا بإنشاء كائن من الكلاس ObservableList<Data> chartData = FXCollections.observableArrayList ( new PieChart.Data("Iphone X", 25), new PieChart.Data("Nokia Lumia 1020", 12), new PieChart.Data("Huawei P30", 26), new PieChart.Data("Samsung S9", 24), new PieChart.Data("Google Pixel 3", 16) ); // الذي يمثل الرسم البياني pieChart هنا وضعنا عنوان للكائن pieChart.setTitle("Mobile Sales 2019"); // حتى يتم عرض محتواه عليه pieChart للكائن chartData هنا مررنا الكائن pieChart.setData(chartData); // عند تمرير الفأرة فوقه pieChart لأننا سنستخدمه لعرض نسبة كل جزء في الكائن Label هنا قمنا بإنشاء كائن من الكلاس Label caption = new Label(""); // caption هنا قمنا بتحديد لون و حجم خط النص الكائن caption.setTextFill(Color.BLACK); caption.setStyle("-fx-font: 16 Tahoma;"); // هنا قمنا بتحديد ما سيحدث عند تمرير الفأرة فوق أي جزء في الرسم البياني pieChart.getData().forEach((data) -> { // هنا قلنا أنه سيتم جلب قيمة الجزء و عرضها فوق سهم الفأرة data.getNode().addEventHandler(MouseEvent.MOUSE_MOVED, (MouseEvent e) -> { caption.setTranslateX(e.getX()); caption.setTranslateY(e.getY()-20); caption.setText(data.getPieValue() + "%"); }); }); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // root في الكائن caption و pieChart هنا قمنا بإضافة الكائنين root.getChildren().addAll(pieChart, caption); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 400, 340•); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX PieChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

ستظهر لك النافذة التالية عند التشغيل.

إظهار قيمة كل جزء في ال PieChart في JavaFX