Tooltip im Liniendiagramm mit Datum

Question

Ich möchte Tooltip hinzufügen, wenn ich den Cursor über eine Diagrammlinie bewege. Ich fand dieses Beispiel:

import java.util.concurrent.ConcurrentLinkedQueue; 
import java.util.concurrent.ExecutorService; 
import java.util.concurrent.Executors; 
import java.util.concurrent.ThreadFactory; 
import java.util.logging.Level; 
import java.util.logging.Logger; 

import javafx.animation.AnimationTimer; 
import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.chart.AreaChart; 
import javafx.scene.chart.LineChart; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.stage.Stage; 


public class AnimatedLineChart extends Application { 

    private static final int MAX_DATA_POINTS = 50; 
    private int xSeriesData = 0; 
    private XYChart.Series series1; 
    private XYChart.Series series2; 
    private XYChart.Series series3; 
    private ExecutorService executor; 
    private AddToQueue addToQueue; 
    private ConcurrentLinkedQueue<Number> dataQ1 = new ConcurrentLinkedQueue<Number>(); 
    private ConcurrentLinkedQueue<Number> dataQ2 = new ConcurrentLinkedQueue<Number>(); 
    private ConcurrentLinkedQueue<Number> dataQ3 = new ConcurrentLinkedQueue<Number>(); 

    private NumberAxis xAxis; 

    private void init(Stage primaryStage) { 
     xAxis = new NumberAxis(0,MAX_DATA_POINTS,MAX_DATA_POINTS/10); 
     xAxis.setForceZeroInRange(false); 
     xAxis.setAutoRanging(false); 


     xAxis.setTickLabelsVisible(false); 
     xAxis.setTickMarkVisible(false); 
     xAxis.setMinorTickVisible(false); 

     NumberAxis yAxis = new NumberAxis(); 
     yAxis.setAutoRanging(true); 

     //-- Chart 
     final LineChart<Number, Number> sc = new LineChart<Number, Number>(xAxis, yAxis) { 
      // Override to remove symbols on each data point 
      @Override protected void dataItemAdded(Series<Number, Number> series, int itemIndex, Data<Number, Number> item) {} 
     }; 
     sc.setAnimated(false); 
     sc.setId("liveLineeChart"); 
     sc.setTitle("Animated Line Chart"); 

     //-- Chart Series 
     series1 = new XYChart.Series<Number, Number>(); 
     series2 = new XYChart.Series<Number, Number>(); 
     series3 = new XYChart.Series<Number, Number>(); 
     sc.getData().addAll(series1, series2, series3); 

     primaryStage.setScene(new Scene(sc)); 
    } 





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


     executor = Executors.newCachedThreadPool(new ThreadFactory() { 
      @Override public Thread newThread(Runnable r) { 
       Thread thread = new Thread(r); 
       thread.setDaemon(true); 
       return thread; 
      } 
     }); 
     addToQueue = new AddToQueue(); 
     executor.execute(addToQueue); 
     //-- Prepare Timeline 
     prepareTimeline(); 


    } 

    private class AddToQueue implements Runnable { 
     public void run() { 
      try { 
       // add a item of random data to queue 
       dataQ1.add(Math.random()); 
       dataQ2.add(Math.random()); 
       dataQ3.add(Math.random()); 

       Thread.sleep(500); 
       executor.execute(this); 
      } catch (InterruptedException ex) { 
       ex.printStackTrace(); 
      } 
     } 
    } 

    //-- Timeline gets called in the JavaFX Main thread 
    private void prepareTimeline() { 
     // Every frame to take any data from queue and add to chart 
     new AnimationTimer() { 
      @Override public void handle(long now) { 
       addDataToSeries(); 
      } 
     }.start(); 
    } 

    private void addDataToSeries() { 
     for (int i = 0; i < 20; i++) { //-- add 20 numbers to the plot+ 
      if (dataQ1.isEmpty()) break; 
      series1.getData().add(new AreaChart.Data(xSeriesData++, dataQ1.remove())); 
      series2.getData().add(new AreaChart.Data(xSeriesData++, dataQ2.remove())); 
      series3.getData().add(new AreaChart.Data(xSeriesData++, dataQ3.remove())); 
     } 
     // remove points to keep us at no more than MAX_DATA_POINTS 
     if (series1.getData().size() > MAX_DATA_POINTS) { 
      series1.getData().remove(0, series1.getData().size() - MAX_DATA_POINTS); 
     } 
     if (series2.getData().size() > MAX_DATA_POINTS) { 
      series2.getData().remove(0, series2.getData().size() - MAX_DATA_POINTS); 
     } 
     if (series3.getData().size() > MAX_DATA_POINTS) { 
      series3.getData().remove(0, series3.getData().size() - MAX_DATA_POINTS); 
     } 
     // update 
     xAxis.setLowerBound(xSeriesData-MAX_DATA_POINTS); 
     xAxis.setUpperBound(xSeriesData-1); 
    } 


    public static void main(String[] args) { 
     launch(args); 
    } 
} 

Zum Beispiel würde Ich mag so etwas wie dies anzuzeigen:

Ist dies möglich mit JavaFX 8? Beim Maus-Hover wird Date angezeigt.

Gibt es ein ähnliches Beispiel, das ich für meinen Fall verwenden kann?

Answer 1

Ich habe es geschafft, etwas sehr nahe an das, was Sie wollen, zu ziehen. Werfen Sie einen Blick auf das Bild unten

I DateAxis zum Bestücken Datum auf der X-Achse verwendet haben, zusammen mit Ereignissen auf der Y-Achse. Sobald die Daten im LineChart ausgefüllt sind, durchlaufen Sie ihre Daten und wenden Sie eine QuickInfo für jeden Knoten an.

Ich habe auch eine styleclass auf mouseEntered verwendet, um den Effekt wie auf dem Bild gezeigt. Diese wird styleclass entfernt auf mouseExit

Werfen Sie einen Blick auf den Code unten:

ToolTipOnLineChart.java

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.chart.LineChart; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.scene.control.Tooltip; 
import javafx.stage.Stage; 

import java.text.ParseException; 
import java.text.SimpleDateFormat; 
import java.util.Date; 

public class ToolTipOnLineChart extends Application { 

    @SuppressWarnings({ "unchecked", "rawtypes" }) 
    @Override 
    public void start(Stage stage) throws ParseException { 
     stage.setTitle("Line Chart Sample"); 
     final DateAxis xAxis = new DateAxis(); 
     final NumberAxis yAxis = new NumberAxis(); 
     xAxis.setLabel("Date"); 
     yAxis.setLabel("Events"); 

     final LineChart<Date,Number> lineChart = new LineChart<>(xAxis, yAxis); 
     lineChart.setTitle("Events"); 

     SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MMM/yyyy"); 


     XYChart.Series<Date,Number> series = new XYChart.Series<>(); 
     series.setName("Events this Year"); 
     series.getData().add(new XYChart.Data(dateFormat.parse("11/Jan/2014"), 23)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("09/Feb/2014"), 14)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("22/Mar/2014"), 15)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("14/Apr/2014"), 24)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("22/May/2014"), 34)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("07/Jun/2014"), 36)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("22/Jul/2014"), 22)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("21/Aug/2014"), 45)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("04/Sep/2014"), 43)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("22/Oct/2014"), 17)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("30/Nov/2014"), 29)); 
     series.getData().add(new XYChart.Data(dateFormat.parse("10/Dec/2014"), 25)); 


     Scene scene = new Scene(lineChart,800,600); 
     scene.getStylesheets().add(getClass().getResource("chart.css").toExternalForm()); 
     lineChart.getData().add(series); 
     stage.setScene(scene); 
     stage.show(); 

     /** 
     * Browsing through the Data and applying ToolTip 
     * as well as the class on hover 
     */ 
     for (XYChart.Series<Date, Number> s : lineChart.getData()) { 
      for (XYChart.Data<Date, Number> d : s.getData()) { 
       Tooltip.install(d.getNode(), new Tooltip(
         d.getXValue().toString() + "\n" + 
           "Number Of Events : " + d.getYValue())); 

       //Adding class on hover 
       d.getNode().setOnMouseEntered(event -> d.getNode().getStyleClass().add("onHover")); 

       //Removing class on exit 
       d.getNode().setOnMouseExited(event -> d.getNode().getStyleClass().remove("onHover")); 
      } 
     } 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

chart.css

.onHover{ 
    -fx-background-color: ORANGE; 
}