JavaFXعرض البيانات باستخدام الكلاس BarChart
المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني شريطي ( Bar Chart ) باستخدام الكلاس BarChart
.
بالإضافة إلى أننا قمنا باستخدام الدالة setLegendVisible()
و تمرير القيمة false
لها حتى لا يتم إظهار الحاوية التي تعلمنا من صاحب هذه الألوان لأنه لا داعي لجعلها ظاهرة في هذا المثال.
المثال الأول
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 { 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); } }
ستظهر لك النافذة التالية عند التشغيل.
معلومة تقنية
بما أن المعلومات التي سيتم وضعها على الخط الأفقي يجب أن تكون تحمل نفس الإسم كان بإمكانك تبديل الكود التالي.
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));
بهذا الكود حتى لا تضطر إلى إعادة ذكر إسم الجدول.
series.getData().add(new Data(xAxis.getCategories().get(0), 8)); series.getData().add(new Data(xAxis.getCategories().get(1), 5)); series.getData().add(new Data(xAxis.getCategories().get(2), 7)); series.getData().add(new Data(xAxis.getCategories().get(3), 6));
صحيح أن الكود يبدو لك أكبر لكنه سيضمن لك على الأقل أن لا يحدث أي خطأ أثناء تحديد أسماء الأعمدة التي سيتم رسمها.
المثال التالي يعلمك طريقة وضع أكثر من Series
على نفس الرسم.
و قمنا بوضع نفس أسماء الأعمدة لكل Series
قمنا بتعريفه حتى يظهروا ضمن مجموعات.
و قمنا بوضع مسافة فارغة بمقدار 60 بين كل مجموعة أعمدة سيتم عرضها حتى لا يظهروا بشكل عريض و متلاصق.
المثال الثاني
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 { 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); } }
ستظهر لك النافذة التالية عند التشغيل.
المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان.
فعلياً, قمنا باستخدام الدالة setLegendSide()
و تمرير الثابت Side.RIGHT
لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.
المثال الثالث
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 { 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); } }
ستظهر لك النافذة التالية عند التشغيل.