Dalam beberapa artikel sebelumnya, kita telah membahas tentang bagaimana cara membuat grafik garis menggunakan JavaFX. Pada artikel ini, kita akan membahas tentang bagaimana cara menambahkan fitur koordinat hover ke dalam grafik garis tersebut.

Grafik garis adalah salah satu bentuk visualisasinya yang paling umum digunakan untuk mewakili data berupa seri waktu. Dalam beberapa kasus, Anda mungkin ingin menampilkan koordinat cursor pada saat mouse diarahkan ke sebuah titik pada grafik garis. Fitur ini sangat berguna ketika Anda ingin memahami lebih lanjut tentang data yang ditampilkan dalam grafik.

Pada artikel ini, kita akan membahas cara membuat grafik garis dengan koordinat hover menggunakan JavaFX. Kita akan menggunakan class LineChart dan Label untuk mencapai tujuan tersebut.

Membuat Grafik Garis

Berikut adalah contoh kode yang dapat Anda gunakan untuk membuat grafik garis:

import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.stage.Stage;

public class LineChartWithHoverCoords extends Application {

 @Override public void start(Stage stage) {
 stage.setTitle("Line Chart Sample");

 final LineChart<Number, Number> lineChart = createChart();
 Label cursorCoords = createCursorGraphCoordsMonitorLabel(lineChart);

 stage.setScene(
 new Scene(
 layoutScene(
 lineChart, 
 cursorCoords
 )
 )
 );
 stage.show();
 }

 // ... (selanjutnya)
}

Pada contoh kode di atas, kita membuat instance dari LineChart dan Label, lalu menambahkan mereka ke dalam scene menggunakan method layoutScene.

Membuat Koordinat Hover

Untuk mencapai fitur koordinat hover, kita perlu menambahkan event handler pada beberapa node dalam grafik garis. Berikut adalah contoh kode yang dapat Anda gunakan:

private Label createCursorGraphCoordsMonitorLabel(LineChart<Number, Number> lineChart) {
 final Axis<Number> xAxis = lineChart.getXAxis();
 final Axis<Number> yAxis = lineChart.getYAxis();

 final Label cursorCoords = new Label();

 // ... (selanjutnya)

 chartBackground.setOnMouseEntered(new EventHandler<MouseEvent>() {
 @Override public void handle(MouseEvent mouseEvent) {
 cursorCoords.setVisible(true);
 }
 });

 chartBackground.setOnMouseMoved(new EventHandler<MouseEvent>() {
 @Override public void handle(MouseEvent mouseEvent) {
 cursorCoords.setText(
 String.format(
 "(%.2f, %.2f)",
 xAxis.getValueForDisplay(mouseEvent.getX()),
 yAxis.getValueForDisplay(mouseEvent.getY())
 )
 );
 }
 });

 // ... (selanjutnya)
}

Pada contoh kode di atas, kita menambahkan event handler pada node chartBackground untuk menampilkan koordinat cursor ketika mouse diarahkan ke sebuah titik pada grafik garis.

Menampilkan Koordinat Cursor

Fitur koordinat hover dapat Anda lihat dalam actionnya. Saat Anda mengarahkan mouse ke sebuah titik pada grafik garis, koordinat cursor akan muncul dan berisi nilai x dan y yang sesuai dengan titik tersebut.

Dalam contoh kode di atas, kita menggunakan method getValueForDisplay untuk mendapatkan nilai x dan y dari node xAxis dan yAxis, lalu menampilkan mereka sebagai koordinat cursor dalam format "(%.2f, %.2f)".

Mengakhiri

Dengan cara membuat grafik garis dengan koordinat hover menggunakan JavaFX, Anda dapat lebih mudah memahami data yang ditampilkan dalam grafik. Fitur ini sangat berguna ketika Anda ingin mengetahui lebih lanjut tentang data yang ditampilkan dalam grafik.

Saya berharap artikel ini telah membantu Anda untuk memahami bagaimana cara membuat grafik garis dengan koordinat hover menggunakan JavaFX. Jika Anda memiliki pertanyaan atau ingin mengetahui lebih lanjut, silakan hubungi saya.