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

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

المثال الأول

Main.java
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 {

    @Override
    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);
    }

}
		

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

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


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

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

Main.java
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 {

    @Override
    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);
    }

}
		

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

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


المثال التالي يريك كيف تظهر القيم على الرسم في حال كانت أصغر من 0 مع الإشارة إلى أنك يجب أن تحدد ذلك للخط العامودي.

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

Main.java
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 {

    @Override
    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);
    }

}
		

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

رسم خطوط قيمتها أصغر من 0 في كائن الـ AreaChart في JavaFX

الدورات

أدوات مساعدة

أقسام الموقع

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