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

المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني شريطي ( Bar Chart ) باستخدام الكلاس BarChart.
بالإضافة إلى أننا قمنا باستخدام الدالة setCreateSymbols() و تمرير القيمة false لها حتى لا يتم إظهار الحاوية التي تعلمنا من صاحب هذه الألوان لأنه لا داعي لجعلها ظاهرة في هذا المثال.

المثال الأول

Main.java
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);
    }

}
		

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

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


معلومة تقنية

بما أن المعلومات التي سيتم وضعها على الخط الأفقي يجب أن تكون تحمل نفس الإسم كان بإمكانك تبديل الكود التالي.

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 على نفس الرسم.
فعلياً, قمنا باستخدام الدالة setLegendSide() و تمرير الثابت Side.RIGHT لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.
و قمنا بوضع نفس أسماء الأعمدة لكل Series قمنا بتعريفه حتى يظهروا ضمن مجموعات.
و قمنا بوضع مسافة فارغة بمقدار 60 بين كل مجموعة أعمدة سيتم عرضها حتى لا يظهروا بشكل عريض و متلاصق.

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

Main.java
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);
    }

}
		

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

إظهار أكثر من Series في كائن الـ BarChart في JavaFX


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

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

Main.java
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);
    }

}
		

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

وضع حاوية دليل ألوان كائن الـ BarChart ناحية اليمين في JavaFX

الدورات

أدوات مساعدة

أقسام الموقع

دورات
مقالات كتب مشاريع أسئلة