堆叠两个XYChart时保持轴同步：动态数据与不同轴范围适配

我之前也碰到过类似的需求——想把两个XYChart垂直堆叠，但它们的数据源是动态更新的，而且数据范围完全不一样，那种共享轴的静态示例根本满足不了。结合你的场景，我整理了一套可行的方案：

先把你给出的初步代码补全并优化（你贴的代码没写完，我按常规动态图表结构延伸）：

import javafx.application.Application;
import javafx.application.Platform;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import java.util.Random;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;

public class DynamicStackedCharts extends Application {
    private final Random random = new Random();
    private final ObservableList<XYChart.Data<Number, Number>> series1Data = FXCollections.observableArrayList();
    private final ObservableList<XYChart.Data<Number, Number>> series2Data = FXCollections.observableArrayList();
    private int xValue = 0;

    @Override
    public void start(Stage stage) {
        // 第一个图表的独立坐标轴
        NumberAxis xAxis1 = new NumberAxis();
        NumberAxis yAxis1 = new NumberAxis();
        yAxis1.setLabel("系列1数值");
        LineChart<Number, Number> chart1 = new LineChart<>(xAxis1, yAxis1);
        chart1.setTitle("动态图表1");
        XYChart.Series<Number, Number> series1 = new XYChart.Series<>(series1Data);
        series1.setName("数据系列1");
        chart1.getData().add(series1);

        // 第二个图表的独立坐标轴
        NumberAxis xAxis2 = new NumberAxis();
        NumberAxis yAxis2 = new NumberAxis();
        yAxis2.setLabel("系列2数值");
        LineChart<Number, Number> chart2 = new LineChart<>(xAxis2, yAxis2);
        chart2.setTitle("动态图表2");
        XYChart.Series<Number, Number> series2 = new XYChart.Series<>(series2Data);
        series2.setName("数据系列2");
        chart2.getData().add(series2);

        // 用VBox垂直堆叠两个图表
        VBox root = new VBox(10, chart1, chart2);
        Scene scene = new Scene(root, 800, 600);
        stage.setTitle("动态堆叠XYChart示例");
        stage.setScene(scene);
        stage.show();

        // 模拟动态数据生成
        ScheduledExecutorService executor = Executors.newSingleThreadScheduledExecutor();
        executor.scheduleAtFixedRate(() -> {
            Platform.runLater(() -> {
                // 系列1生成0-100的随机数
                series1Data.add(new XYChart.Data<>(xValue, random.nextInt(101)));
                // 系列2生成500-1000的随机数，范围和系列1完全不同
                series2Data.add(new XYChart.Data<>(xValue, random.nextInt(501) + 500));
                xValue++;
                // 可选：限制显示的数据点数量，避免图表卡顿
                if (series1Data.size() > 20) {
                    series1Data.remove(0);
                    series2Data.remove(0);
                }
            });
        }, 0, 500, TimeUnit.MILLISECONDS);

        // 关闭程序时停止线程池
        stage.setOnCloseRequest(event -> executor.shutdown());
    }

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

关键要点说明： #

• 独立坐标轴：给每个图表单独创建NumberAxis，不要共享轴。这样每个图表的Y轴会根据自己的数据自动调整范围，完全不受另一个图表的影响
• 动态数据更新：必须用Platform.runLater把数据更新操作放到JavaFX应用线程中执行，否则会抛出线程安全异常
• 自动轴范围：NumberAxis默认的autoRanging是true，所以数据更新时轴会自动缩放，不需要手动设置范围；如果需要自定义范围，也可以通过setLowerBound和setUpperBound手动调整
• 布局堆叠：用VBox来垂直排列两个图表，设置合适的间距（示例中是10），就能实现堆叠效果
• 性能优化：如果数据量很大，记得限制显示的数据点数量，避免图表渲染卡顿

这样实现的两个图表，会各自根据自己的动态数据独立更新轴范围，完美满足你的需求。

内容的提问来源于stack exchange，提问作者Ben