लाइन चार्ट पर टूलटिप दिनांक

Question

जब मैं कर्सर को चार्ट लाइन पर ले जाता हूं तो मैं टूलटिप जोड़ना चाहता हूं।

JavaFX 8 के साथ इस संभव है:

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); 
    } 
} 

उदाहरण के लिए मैं कुछ इस तरह प्रदर्शित करना चाहते हैं: मैं इस उदाहरण पाया? माउस होवर पर यह Date दिखा रहा है।

क्या कोई ऐसा उदाहरण है जिसका उपयोग मैं अपने मामले के लिए कर सकता हूं?

Answer 1

मैंने जो कुछ भी आप चाहते हैं उसके करीब कुछ खींचने में कामयाब रहे हैं। नीचे

छवि पर एक नज़र मैं X- अक्ष पर तारीख को आबाद करने, Y- अक्ष पर घटनाओं के साथ साथ के लिए DateAxis का इस्तेमाल किया है है। एक बार लाइन चार्ट में डेटा पॉप्युलेट हो जाने के बाद, अपने डेटा के माध्यम से पुनरावृत्त करें और प्रत्येक नोड पर टूलटिप लागू करें।

मैंने छवि पर दिखाए गए प्रभाव को लागू करने के लिए mouseEntered पर styleclass का भी उपयोग किया है। यह styleclass mouseExit

पर निकाल दिया जाता है नीचे कोड पर एक नज़र डालें:

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; 
}