JavaFXعرض البيانات باستخدام الكلاس AreaChart
المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني مساحي ( Area Chart ) باستخدام الكلاس AreaChart.
المثال الأول
import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart.Data; import javafx.scene.chart.XYChart.Series; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { public void start(Stage stage) { // يمثل مدى الأرقام التي سيتم عرضها على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis xAxis = new NumberAxis(1, 31, 1); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(0, 40, 5); // يمثل الرسم البياني الذي نريد إضافته في النافذة AreaChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين AreaChart areaChart = new AreaChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .areaChart هنا وضعنا عنوان للكائن areaChart.setTitle("Temperature Monitoring (in Degrees C)"); // areaChart يمثل الخط الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series series = new Series(); // أي وضعنا إسم للخط الذي سيتم رسمه .series هنا وضعنا إسم للكائن series.setName("April"); // بناءاً عليها series هنا قمنا بتعريف كل النقاط التي سيتم رسم الكائن series.getData().add(new Data(1, 18)); series.getData().add(new Data(5, 22)); series.getData().add(new Data(10, 28)); series.getData().add(new Data(15, 24)); series.getData().add(new Data(20, 26)); series.getData().add(new Data(25, 32)); series.getData().add(new Data(30, 31)); // الذي يمثل الرسم البياني areaChart الذي يمثل الخط على الكائن series هنا قمنا بإضافة الكائن // المقصود هنا أننا وضعنا الخط - الذي قمنا سابقاً بتحديد كل نقطة فيه - على الرسم البياني حتى يظهر عليه areaChart.getData().add(series); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن areaChart هنا قمنا بإضافة الكائن root.getChildren().addAll(areaChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 600, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX AreaChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }
ستظهر لك النافذة التالية عند التشغيل.
المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان و طريقة إخفاء الدوائر التي تظهر على الخط.
فعلياً, قمنا باستخدام الدالة setLegendSide() و تمرير الثابت Side.RIGHT لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.
و قمنا باستخدام الدالة setCreateSymbols() و تمرير القيمة false لها حتى لا يتم رسم دوائر فارغة على الخطوط التي سيتم رسمها.
المثال الثاني
import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Side; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart.Data; import javafx.scene.chart.XYChart.Series; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { public void start(Stage stage) { // يمثل مدى الأرقام التي سيتم عرضها على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis xAxis = new NumberAxis(1, 31, 1); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(0, 40, 5); // يمثل الرسم البياني الذي نريد إضافته في النافذة AreaChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين AreaChart areaChart = new AreaChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .areaChart هنا وضعنا عنوان للكائن areaChart.setTitle("Temperature Monitoring (in Degrees C)"); // هنا جعلنا حاوية دليل الألوان تظهر يمين الرسم البياني areaChart.setLegendSide(Side.RIGHT); // هنا جعلنا الدوائر التي كانت تظهر على الخطوط تختفي areaChart.setCreateSymbols(false); // areaChart يمثل الخط الأول الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series marchSeries = new Series(); marchSeries.setName("March"); marchSeries.getData().add(new Data(1, 12)); marchSeries.getData().add(new Data(5, 16)); marchSeries.getData().add(new Data(10, 18)); marchSeries.getData().add(new Data(15, 26)); marchSeries.getData().add(new Data(20, 30)); marchSeries.getData().add(new Data(25, 24)); marchSeries.getData().add(new Data(30, 19)); marchSeries.getData().add(new Data(31, 18)); // areaChart يمثل الخط الثاني الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series aprilSeries = new Series(); aprilSeries.setName("April"); aprilSeries.getData().add(new Data(1, 18)); aprilSeries.getData().add(new Data(5, 22)); aprilSeries.getData().add(new Data(10, 28)); aprilSeries.getData().add(new Data(15, 24)); aprilSeries.getData().add(new Data(20, 26)); aprilSeries.getData().add(new Data(25, 32)); aprilSeries.getData().add(new Data(30, 31)); // حتى يظهرا على الرسم البياني areaChart على الكائن aprilSeries و marchSeries هنا قمنا بإضافة الكائنين areaChart.getData().add(marchSeries); areaChart.getData().add(aprilSeries); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن areaChart هنا قمنا بإضافة الكائن root.getChildren().addAll(areaChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 600, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX AreaChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }
ستظهر لك النافذة التالية عند التشغيل.
المثال التالي يريك كيف تظهر القيم على الرسم في حال كانت أصغر من 0 مع الإشارة إلى أنك يجب أن تحدد ذلك للخط العامودي.
المثال الثالث
import javafx.application.Application; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart.Data; import javafx.scene.chart.XYChart.Series; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class Main extends Application { public void start(Stage stage) { // يمثل مدى الأرقام التي سيتم عرضها على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis xAxis = new NumberAxis(1, 31, 1); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(-10, 35, 5); // يمثل الرسم البياني الذي نريد إضافته في النافذة AreaChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين AreaChart areaChart = new AreaChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .areaChart هنا وضعنا عنوان للكائن areaChart.setTitle("Temperature Monitoring (in Degrees C)"); // هنا جعلنا الدوائر التي كانت تظهر على الخطوط تختفي areaChart.setCreateSymbols(false); // areaChart يمثل الخط الأول الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series marchSeries = new Series(); marchSeries.setName("March"); marchSeries.getData().add(new Data(1, 12)); marchSeries.getData().add(new Data(5, 16)); marchSeries.getData().add(new Data(10, 18)); marchSeries.getData().add(new Data(15, 26)); marchSeries.getData().add(new Data(20, 30)); marchSeries.getData().add(new Data(25, 24)); marchSeries.getData().add(new Data(30, 19)); marchSeries.getData().add(new Data(31, 18)); // areaChart يمثل الخط الثاني الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series aprilSeries = new Series(); aprilSeries.setName("April"); aprilSeries.getData().add(new Data(1, 18)); aprilSeries.getData().add(new Data(5, 22)); aprilSeries.getData().add(new Data(10, 28)); aprilSeries.getData().add(new Data(15, 24)); aprilSeries.getData().add(new Data(20, 26)); aprilSeries.getData().add(new Data(25, 32)); aprilSeries.getData().add(new Data(30, 31)); // areaChart يمثل الخط الثاني الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series februarySeiries = new Series(); februarySeiries.setName("February"); februarySeiries.getData().add(new Data(1, -4)); februarySeiries.getData().add(new Data(5, -2)); februarySeiries.getData().add(new Data(10, -9)); februarySeiries.getData().add(new Data(15, -2)); februarySeiries.getData().add(new Data(20, 8)); februarySeiries.getData().add(new Data(25, 18)); februarySeiries.getData().add(new Data(28, 14)); // حتى يظهرا على الرسم البياني areaChart على الكائن aprilSeries و marchSeries و February هنا قمنا بإضافة الكائنات areaChart.getData().add(februarySeiries); areaChart.getData().add(marchSeries); areaChart.getData().add(aprilSeries); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن areaChart هنا قمنا بإضافة الكائن root.getChildren().addAll(areaChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 600, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX AreaChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }
ستظهر لك النافذة التالية عند التشغيل.
