鼠標滾輪變焦條形圖

Question

我發現了很多例子，如何放大圖表，但我正在尋找一個基本的例子，用戶可以用鼠標滾輪滾動。

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.chart.BarChart; 
import javafx.scene.chart.CategoryAxis; 
import javafx.scene.chart.NumberAxis; 
import javafx.scene.chart.XYChart; 
import javafx.stage.Stage; 

public class BarChartSample extends Application { 
    final static String austria = "Austria"; 
    final static String brazil = "Brazil"; 
    final static String france = "France"; 
    final static String italy = "Italy"; 
    final static String usa = "USA"; 

    @Override public void start(Stage stage) { 
     stage.setTitle("Bar Chart Sample"); 
     final CategoryAxis xAxis = new CategoryAxis(); 
     final NumberAxis yAxis = new NumberAxis(); 
     final BarChart<String,Number> bc = 
      new BarChart<String,Number>(xAxis,yAxis); 
     bc.setTitle("Country Summary"); 
     xAxis.setLabel("Country");  
     yAxis.setLabel("Value"); 

     XYChart.Series series1 = new XYChart.Series(); 
     series1.setName("2003");  
     series1.getData().add(new XYChart.Data(austria, 25601.34)); 
     series1.getData().add(new XYChart.Data(brazil, 20148.82)); 
     series1.getData().add(new XYChart.Data(france, 10000)); 
     series1.getData().add(new XYChart.Data(italy, 35407.15)); 
     series1.getData().add(new XYChart.Data(usa, 12000));  

     XYChart.Series series2 = new XYChart.Series(); 
     series2.setName("2004"); 
     series2.getData().add(new XYChart.Data(austria, 57401.85)); 
     series2.getData().add(new XYChart.Data(brazil, 41941.19)); 
     series2.getData().add(new XYChart.Data(france, 45263.37)); 
     series2.getData().add(new XYChart.Data(italy, 117320.16)); 
     series2.getData().add(new XYChart.Data(usa, 14845.27)); 

     XYChart.Series series3 = new XYChart.Series(); 
     series3.setName("2005"); 
     series3.getData().add(new XYChart.Data(austria, 45000.65)); 
     series3.getData().add(new XYChart.Data(brazil, 44835.76)); 
     series3.getData().add(new XYChart.Data(france, 18722.18)); 
     series3.getData().add(new XYChart.Data(italy, 17557.31)); 
     series3.getData().add(new XYChart.Data(usa, 92633.68)); 

     Scene scene = new Scene(bc,800,600); 
     bc.getData().addAll(series1, series2, series3); 
     stage.setScene(scene); 
     stage.show(); 
    } 

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

任何幫助，歡迎。

P.S我測試過將代碼插入到ScrollPane中，但我沒有看到使用它的任何效果。

ScrollPane s1 = new ScrollPane(); 
     //s1.setPrefSize(620, 620); 
     s1.setHbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED); // Horizontal scroll bar 
     s1.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED); // Vertical scroll bar 
     s1.setContent(bc); 

Answer 1

看看this答案。

我知道了，此代碼的工作：

final double SCALE_DELTA = 1.1; 
bc.setOnScroll(new EventHandler<ScrollEvent>() { 
    public void handle(ScrollEvent event) { 
     event.consume(); 

     if (event.getDeltaY() == 0) { 
      return; 
     } 

     double scaleFactor = (event.getDeltaY() > 0) ? SCALE_DELTA : 1/SCALE_DELTA; 

     bc.setScaleX(bc.getScaleX() * scaleFactor); 
     bc.setScaleY(bc.getScaleY() * scaleFactor); 
    } 
}); 

bc.setOnMousePressed(new EventHandler<MouseEvent>() { 
    public void handle(MouseEvent event) { 
     if (event.getClickCount() == 2) { 
      bc.setScaleX(1.0); 
      bc.setScaleY(1.0); 
     } 
    } 
}); 

Answer 2

你應該看看傑森Winnebeck的JFXUtils。他開發了一個非常好的圖表，用於圖表縮放和平移（拖動縮放的圖表區域，如Google地圖）。

• 您還可以輕鬆地重置圖表。我將它連接成雙擊，就像你建議的那樣。
• 您可以在自定義StableTicksAxis上指定軸標籤的格式（我在x軸上顯示日期和時間）。
• 縮放可在圖表區域或軸上單擊並拖動，以放大x或y軸的整個範圍。
• 鼠標滾輪縮放功能正在烘烤。
• 他有一個超級簡單默認設置的便捷方法，該方法將圖表包裝在實現縮放所需的組件中。