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

import java.util.Arrays; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; 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 { @Override public void start(Stage stage) { // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList( Arrays.asList("Speed", "Safety", "Milage", "User Rating"))); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(0, 12, 2); // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين BarChart barChart = new BarChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن barChart.setTitle("Audi Characteristics"); // واحد في النافذة و بالتالي لا داعي لجعلها ظاهرة series هنا جعلنا الحاوية التي تعلمنا من صاحب هذه الألوان تختفي لأننا سنعرف خصائص barChart.setLegendVisible(false); // barChart يمثل كل الخطوط التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس Series series = new Series(); // series هنا قمنا بتعريف كل الخطوط التي سيتم رسمها للكائن // ملاحظة: بما أن كل هذه الخطوط تعود لنفس الكائن, سيتم إعطاءها نفس اللون series.getData().add(new Data("Speed", 8)); series.getData().add(new Data("Safety", 5)); series.getData().add(new Data("Milage", 7)); series.getData().add(new Data("User Rating", 6)); // الذي يمثل الرسم البياني barChart الذي يمثل كل الخطوط البرتقالية على الكائن series هنا قمنا بإضافة الكائن barChart.getData().add(series); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن barChart هنا قمنا بإضافة الكائن root.getChildren().addAll(barChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 400, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX BarChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

import java.util.Arrays; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.geometry.Insets; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; 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 { @Override public void start(Stage stage) { // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList( Arrays.asList("Speed", "Safety", "Milage", "User Rating"))); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(0, 12, 2); // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين BarChart barChart = new BarChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن barChart.setTitle("Cars Comparison Result"); // هنا قمنا بإضافة مسافة فارغة بمقدار 60 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق barChart.setCategoryGap(60); // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها Series audiSeries = new Series(); audiSeries.setName("Audi"); audiSeries.getData().add(new Data("Speed", 8)); audiSeries.getData().add(new Data("Safety", 5)); audiSeries.getData().add(new Data("Milage", 7)); audiSeries.getData().add(new Data("User Rating", 6)); // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها Series fiatSeries = new Series(); fiatSeries.setName("Fiat"); fiatSeries.getData().add(new Data("Speed", 6)); fiatSeries.getData().add(new Data("Safety", 8)); fiatSeries.getData().add(new Data("Milage", 8)); fiatSeries.getData().add(new Data("User Rating", 5)); // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها Series mercedesSeries = new Series(); mercedesSeries.setName("Mercedes"); mercedesSeries.getData().add(new Data("Speed", 9)); mercedesSeries.getData().add(new Data("Safety", 8)); mercedesSeries.getData().add(new Data("Milage", 6)); mercedesSeries.getData().add(new Data("User Rating", 8)); // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن barChart هنا قمنا بإضافة الكائن root.getChildren().addAll(barChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 600, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX BarChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }

import java.util.Arrays; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.geometry.Insets; import javafx.geometry.Side; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; 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 { @Override public void start(Stage stage) { // يمثل إسم كل عامود سيتم عرضه على الخط الأفقي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس // سيتم عرض معلوماته يجب أن يعتمد نفس هذه الأسماء serires إنتبه: أي CategoryAxis xAxis = new CategoryAxis(FXCollections.observableArrayList( Arrays.asList("Speed", "Safety", "Milage", "User Rating"))); // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس NumberAxis yAxis = new NumberAxis(0, 12, 2); // يمثل الرسم البياني الذي نريد إضافته في النافذة BarChart هنا قمنا بإنشاء كائن من الكلاس // yAxis و xAxis الأرقام و الأسماء التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين BarChart barChart = new BarChart(xAxis, yAxis); // أي وضعنا عنوان للرسم البياني .barChart هنا وضعنا عنوان للكائن barChart.setTitle("Cars Comparison Result"); // هنا قمنا بإضافة مسافة فارغة بمقدار 40 بيكسل بين كل مجموعة أعمدة سيتم عرضها في الجدول حتى لا يظهروا بشكل عريض و متلاصق barChart.setCategoryGap(40); // هنا جعلنا حاوية دليل الألوان تظهر يمين الرسم البياني barChart.setLegendSide(Side.RIGHT); // barChart يمثل كل خصائص السيارة الأولى التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأحمر ,"Audi" ملاحظة: السيارة الأولى قمنا بتسميتها Series audiSeries = new Series(); audiSeries.setName("Audi"); audiSeries.getData().add(new Data("Speed", 8)); audiSeries.getData().add(new Data("Safety", 5)); audiSeries.getData().add(new Data("Milage", 7)); audiSeries.getData().add(new Data("User Rating", 6)); // barChart يمثل كل خصائص السيارة الثاني التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون البرتقالي ,"Fiat" ملاحظة: السيارة الثانية قمنا بتسميتها Series fiatSeries = new Series(); fiatSeries.setName("Fiat"); fiatSeries.getData().add(new Data("Speed", 6)); fiatSeries.getData().add(new Data("Safety", 8)); fiatSeries.getData().add(new Data("Milage", 8)); fiatSeries.getData().add(new Data("User Rating", 5)); // barChart يمثل كل خصائص السيارة الثالثة التي سيتم رسمها على الكائن Series هنا قمنا بإنشاء كائن من الكلاس // و إفتراضياً سيتم تلوين خصائص هذه السيارة باللون الأخضر ,"Mercedes" ملاحظة: السيارة الثالثة قمنا بتسميتها Series mercedesSeries = new Series(); mercedesSeries.setName("Mercedes"); mercedesSeries.getData().add(new Data("Speed", 9)); mercedesSeries.getData().add(new Data("Safety", 8)); mercedesSeries.getData().add(new Data("Milage", 6)); mercedesSeries.getData().add(new Data("User Rating", 8)); // الذي يمثل الرسم البياني barChart حتى يظهروا على الكائن mercedesSeries و fiatSeries ,audiSeries هنا قمنا بإضافة الكائنات barChart.getData().addAll(audiSeries, fiatSeries, mercedesSeries); // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس StackPane root = new StackPane(); // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن root.setPadding(new Insets(10)); // root في الكائن barChart هنا قمنا بإضافة الكائن root.getChildren().addAll(barChart); // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن Scene scene = new Scene(root, 600, 340); // هنا وضعنا عنوان للنافذة stage.setTitle("JavaFX BarChart"); // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ stage.setScene(scene); // هنا قمنا بإظهار النافذة stage.show(); } // هنا قمنا بتشغيل التطبيق public static void main(String[] args) { launch(args); } }