Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals 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);
}
}
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);
}
}
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