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

你应该查看Jason Winnebeck的JFXUtils。他为图表缩放和平移开发了一个非常好的库（拖动像谷歌地图这样的缩放图表区域）。

您还可以轻松重置图表。我把它连接起来就像你建议的那样双击。
您可以在自定义StableTicksAxis上指定轴标签的格式（我在x轴上显示日期和时间）。
缩放可以在图表区域或轴上单击并拖动，以放大到x轴或y轴的整个范围。
鼠标滚轮缩放正好进入。
他有一个超级简单默认设置的便捷方法，它将图表包装在实现缩放所需的组件中。

用鼠标滚轮缩放条形图

2 个答案: