Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing

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

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

المثال الأول

Main.java
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
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(2010, 2020, 1);

        // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
        NumberAxis yAxis = new NumberAxis(0, 1000, 50);

        // يمثل الرسم البياني الذي نريد إضافته في النافذة LineChart هنا قمنا بإنشاء كائن من الكلاس
        // yAxis و xAxis الأرقام التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
        LineChart lineChart = new LineChart(xAxis, yAxis);
        
        // أي وضعنا عنوان للرسم البياني .lineChart هنا وضعنا عنوان للكائن
        lineChart.setTitle("Adsense");

        // lineChart يمثل الخط الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        Series series = new Series();
        
        // أي وضعنا إسم للخط الذي سيتم رسمه .series هنا وضعنا إسم للكائن
        series.setName("Estimated Earnings");

        // بناءاً عليها series هنا قمنا بتعريف كل النقاط التي سيتم رسم الكائن
        series.getData().add(new Data(2010, 0));
        series.getData().add(new Data(2011, 160));
        series.getData().add(new Data(2012, 290));
        series.getData().add(new Data(2013, 450));
        series.getData().add(new Data(2014, 590));
        series.getData().add(new Data(2015, 500));
        series.getData().add(new Data(2016, 720));
        series.getData().add(new Data(2017, 700));
        series.getData().add(new Data(2018, 880));
        series.getData().add(new Data(2019, 670));

        // الذي يمثل الرسم البياني lineChart الذي يمثل الخط على الكائن series هنا قمنا بإضافة الكائن
        // المقصود هنا أننا وضعنا الخط - الذي قمنا سابقاً بتحديد كل نقطة فيه - على الرسم البياني حتى يظهر عليه
        lineChart.getData().add(series);

        // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
        StackPane root = new StackPane();
        
        // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
        root.setPadding(new Insets(10));

        // root في الكائن lineChart هنا قمنا بإضافة الكائن
        root.getChildren().addAll(lineChart);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 600, 340);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX LineChart");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}

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

مثال حول الكلاس LineChart في 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.LineChart;
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(2010, 2020, 1);

        // يمثل مدى الأرقام التي سيتم عرضها على الخط العامودي في الرسم البياني NumberAxis هنا قمنا بإنشاء كائن من الكلاس          
        NumberAxis yAxis = new NumberAxis(0, 10_000_000, 1_000_000);

        // يمثل الرسم البياني الذي نريد إضافته في النافذة LineChart هنا قمنا بإنشاء كائن من الكلاس
        // yAxis و xAxis الأرقام التي ستظهر عليه عامودياً و أفقياً سيتم تحديدها بناءاً على قيم الكائنين
        LineChart lineChart = new LineChart(xAxis, yAxis);
        
        // هنا جعلنا حاوية دليل الألوان تظهر يمين الرسم البياني
        lineChart.setLegendSide(Side.RIGHT);
        
        // هنا جعلنا الدوائر التي كانت تظهر على الخطوط تختفي
        lineChart.setCreateSymbols(false);
        
        // أي وضعنا عنوان للرسم البياني .lineChart هنا وضعنا عنوان للكائن
        lineChart.setTitle("Favourite Operating System in USA");

        // lineChart يمثل الخط الأول الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        Series androidSeries = new Series();
        androidSeries.setName("Android Users");
        androidSeries.getData().add(new Data(2010, 3885642));
        androidSeries.getData().add(new Data(2011, 5153455));
        androidSeries.getData().add(new Data(2012, 6620012));
        androidSeries.getData().add(new Data(2013, 6550220));
        androidSeries.getData().add(new Data(2014, 7100253));
        androidSeries.getData().add(new Data(2015, 9422689));
        androidSeries.getData().add(new Data(2016, 6800234));
        androidSeries.getData().add(new Data(2017, 5226890));
        androidSeries.getData().add(new Data(2018, 6112690));
        androidSeries.getData().add(new Data(2019, 7826789));
        androidSeries.getData().add(new Data(2020, 7022689));
        
        // lineChart يمثل الخط الثاني الذي سيتم رسمه على الكائن Series هنا قمنا بإنشاء كائن من الكلاس
        Series iosSeries = new Series();
        iosSeries.setName("IOS Users");
        iosSeries.getData().add(new Data(2010, 4885135));
        iosSeries.getData().add(new Data(2011, 5856655));
        iosSeries.getData().add(new Data(2012, 6020012));
        iosSeries.getData().add(new Data(2013, 5850220));
        iosSeries.getData().add(new Data(2014, 5400253));
        iosSeries.getData().add(new Data(2015, 7722689));
        iosSeries.getData().add(new Data(2016, 7900234));
        iosSeries.getData().add(new Data(2017, 6926890));
        iosSeries.getData().add(new Data(2018, 8012690));
        iosSeries.getData().add(new Data(2019, 8526789));
        iosSeries.getData().add(new Data(2020, 7922689));

        // حتى يظهرا على الرسم البياني lineChart على الكائن iosSeries و androidSeries هنا قمنا بإضافة الكائنين
        lineChart.getData().add(androidSeries);
        lineChart.getData().add(iosSeries);

        // في النافذة Root Node لأننا ننوي جعله الـ StackPane هنا قمنا بإنشاء كائن من الكلاس
        StackPane root = new StackPane();
        
        // حتى يتم إبعاد الرسم البياني قليلاً عن أطراف النافذة root هنا قمنا بإضافة هامش بمقدار 10 بيكسل على كل جوانب الكائن
        root.setPadding(new Insets(10));

        // root في الكائن lineChart هنا قمنا بإضافة الكائن
        root.getChildren().addAll(lineChart);

        // فيها و تحديد حجمها Node كأول root هنا قمنا بإنشاء محتوى النافذة مع تعيين الكائن
        Scene scene = new Scene(root, 600, 340);

        // هنا وضعنا عنوان للنافذة
        stage.setTitle("JavaFX LineChart");

        // أي وضعنا محتوى النافذة الذي قمنا بإنشائه للنافذة .stage في كائن الـ scene هنا وضعنا كائن الـ
        stage.setScene(scene);

        // هنا قمنا بإظهار النافذة
        stage.show();

    }

    // هنا قمنا بتشغيل التطبيق
    public static void main(String[] args) {
        launch(args);
    }

}

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

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