꺾은 선형 차트의 요일 표시

Question

커서를 차트 선 위로 이동하면 툴팁을 추가하고 싶습니다.

자바 FX 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

나는 당신이 원하는 것에 아주 가까운 것을 끌어낼 수 있었다. 나는 Y 축에 이벤트와 함께, X 축에 날짜를 채우는 DateAxis을 사용했다

아래 이미지에서보세요. LineChart에 데이터가 채워지면 데이터를 반복하고 각 노드에 툴팁을 적용합니다.

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