JavaFXعرض البيانات باستخدام الكلاس LineChart
المثال التالي يعلمك طريقة عرض البيانات على شكل رسم بياني خطي ( Line Chart ) باستخدام الكلاس LineChart
.
المثال الأول
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 { 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); } }
ستظهر لك النافذة التالية عند التشغيل.
المثال التالي يعلمك طريقة تحديد مكان ظهور حاوية دليل الألوان و طريقة إخفاء الدوائر التي تظهر على الخط.
فعلياً, قمنا باستخدام الدالة setLegendSide()
و تمرير الثابت Side.RIGHT
لها حتى يتم عرض حاوية دليل الألوان المستخدمة في الرسم من ناحية اليمين.
و قمنا باستخدام الدالة setCreateSymbols()
و تمرير القيمة false
لها حتى لا يتم رسم دوائر فارغة على الخطوط التي سيتم رسمها.
المثال الثاني
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 { 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); } }
ستظهر لك النافذة التالية عند التشغيل.