将多个实时图表从 XChart 添加到 JPanel

Question

我负责在 Java 中创建一个 GUI，以监控多个地区的多个人的心率（出于保密原因进行了修改）。

一共有8个区域，每个区域包含8个人。这些由 JTabbedPane 指示，每个区域有 1 个选项卡。我正在尝试使用 XChart 库绘制和创建 8 个实时图表。数据将从文本文件中读取并作为两个双精度数组传递。其中一个数组是以毫秒为单位的时间（x 轴），第二个数组是 1 人的心率数据（y 轴）。每个人都将在其相应的区域标签中拥有自己的个人图表。

这类似于在医院里观察几张图表来监控生命体征，从而大致了解这个应用程序应该模拟什么。

我目前使用的是模型-视图-控制器架构。

TLDR; 为了分解它，我只是尝试在 JTabbedPane 内的 JPanel 内的选项卡内添加多个实时 XYChart。但就目前而言，只需添加 ONE 实时图表就可以了。

View.java

private void initComponents() {
    jTabbedPane1 = new javax.swing.JTabbedPane();
    tabRegion1 = new javax.swing.JPanel();
    jTabbedPane1.setTabPlacement(javax.swing.JTabbedPane.BOTTOM);
    tabRegion1.setLayout(new java.awt.GridLayout(4, 2));

    // Populate the JPanel with empty static graphs
    for(int i = 0; i < Global.MAX_GRAPHS; i++)
        tabRegion1.add(Graph.getRandomStaticGraph());

    jTabbedPane1.addTab("Region 1", tabRegion1);
}

Graph.java（模型）

// Testing purposes
public static JPanel getRandomStaticGraph() {
    XYChart chart = getEmptyXYChart();

    XYSeries series = chart.addSeries("HeartRate", null, getRandomWalk(200));
    series.setMarker(SeriesMarkers.NONE);
    return new XChartPanel(chart);
}

// Testing purposes
public static JPanel getRandomRealTimeGraph() throws InterruptedException {
    XYChart chart = getEmptyXYChart();

    // Show it
    final SwingWrapper<XYChart> sw = new SwingWrapper<XYChart>(chart);
    sw.displayChart();

    double phase = 0;
    double[][] initdata = getSineData(phase);
    XYSeries series = chart.addSeries("HeartRate", null, getRandomWalk(200));
    while(true) {
        phase += 2 * Math.PI * 2 / 20.0;

        Thread.sleep(100);
        final double[][] data = getSineData(phase);

        chart.updateXYSeries("sine", data[0], data[1], null);
        sw.repaintChart();

    }

}
// To be used to generate random static graphs (testing purposes)
private static double[] getRandomWalk(int numPoints) {
    double[] y = new double[numPoints];
    y[0] = 0;
    for(int i = 1; i < y.length; i++)
        y[i] = y[i-1] + Math.random() - .5;
    return y;
}

// To be used to generate real time graphs (testing purposes)
private static double[][] getSineData(double phase) {
    double[] xData = new double[100];
    double[] yData = new double[100];
    for(int i = 0; i < xData.length; i++) {
        double radians = phase + (2 * Math.PI / xData.length * i);
        xData[i] = radians;
        yData[i] = Math.sin(radians);
    }
    return new double[][] {xData, yData};
}

资源和我看过的地方
http://knowm.org/how-to-make-real-time-charts-in-java/：这个网站帮助我为实时图创建了一个基类，但无法帮助将它集成到 JPanel 中或如何通过 repaint() 或 update() 使其成为“实时”。并不是说使用 repaint() 或 update() 是必要的。我愿意接受几乎任何建议。

当前环境
- NetBeans IDE 8.2（用于 GUI 生成器）
- Java 1.8.0_111
- XChart JAR (http://knowm.org/open-source/xchart/)

附加说明
我只是无法调用 getRandomRealTimeGraph() 来返回 JPanel 甚至是 XChartPanel，因此我可以将其添加到 JTabbedPane。我会喜欢任何有帮助的建议！

如果这有帮助，则数据已经存在并且正在被解析为 2 个双精度数组。但就目前而言，我并不真正关心作为 x 数据和 y 数据的内容。只要我以后可以替换它，我对任何事情都很满意。

非常感谢！

Answer 1

好的，你需要退后一步，想想你想要实现什么，然后你需要弄清楚如何让它适用于一张图表，如果你能让它适用于一张图表，你应该可以扩展它。

从一个简单的模型概念开始。模型应该抽象出数据，不管它来自文件、Web 服务、数据库、串行端口还是其他方式，解决方案的其他部分不应该关心，它们应该只关心数据以通用方式呈现。

类似...

public interface HeartMonitorModel {
    public List<Double>[] getSineData();
    public List<Double> getWalkData();
}

是的，每个图表都需要一个单独的模型，否则您将为每个图表呈现相同的数据。

现在为了争论，我只是简单地为您编写了代码并生成了一个简单的默认实现。

public class DefaultHeartMonitorModel implements HeartMonitorModel {

    private double phase = 0;
    private int numPoints = 200;

    @Override
    public List[] getSineData() {
        phase += 2 * Math.PI * 2 / 20.0;
        List<Double> xData = new ArrayList<>(100);
        List<Double> yData = new ArrayList<>(100);
        for (int i = 0; i < 100; i++) {
            double radians = phase + (2 * Math.PI / 100 * i);
            xData.add(radians);
            yData.add(Math.sin(radians));
        }
        return new List[]{xData, yData};
    }

    @Override
    public List getWalkData() {
        List<Double> data = new ArrayList<>(numPoints);
        data.add(0.0);
        for (int i = 1; i < numPoints; i++) {
            double last = data.get(i - 1);
            data.add(last + + Math.random() - .5);
        }
        return data;
    }

}

理论上，您应该能够创建尽可能多的此类实例，并且它应该呈现稍微随机的数据

现在，我们还需要两件事，我们需要一些方法来显示图表数据和更新它。

要更新我们的模型，我们需要以某种方式获取新数据并以不阻塞事件调度线程的方式将其反馈给 UI

为此，我从一个充当桥梁的简单界面开始

public interface ChartMonitor {
    public HeartMonitorModel getModel();
    public void updateData(List<Double>[] data);
}

然后SwingWorker 使用它在后台请求新数据并将该信息反馈给 EDT，以便可以安全地在屏幕上更新它

public class UpdateWorker extends SwingWorker<Void, List<Double>[]> {

    private ChartMonitor monitor;
    private XYChart chart;

    public UpdateWorker(ChartMonitor monitor) {
        this.monitor = monitor;
    }

    @Override
    protected Void doInBackground() throws Exception {
        while (true) {
            Thread.sleep(100);
            publish(monitor.getModel().getSineData());
        }
    }

    @Override
    protected void process(List<List<Double>[]> chunks) {
        for (List<Double>[] data : chunks) {
            monitor.updateData(data);
        }
    }

}

最后，我们需要把它全部展示出来......

public class SeriesChartPane extends JPanel implements ChartMonitor {

    private HeartMonitorModel model;
    private XYChart chart;

    public SeriesChartPane(HeartMonitorModel model) {
        this.model = model;
        chart = new XYChartBuilder().width(400).height(200).title("Are you dead yet?").build();

        List<Double> walkData = model.getWalkData();
        chart.addSeries("Heart Rate", null, walkData);

        List<Double>[] sineData = model.getSineData();
        chart.addSeries("sine", sineData[0], sineData[1]);
        setLayout(new BorderLayout());

        XChartPanel<XYChart> chartPane = new XChartPanel<>(chart);
        add(chartPane);

        UpdateWorker worker = new UpdateWorker(this);
        worker.execute();
    }

    @Override
    public HeartMonitorModel getModel() {
        return model;
    }

    @Override
    public void updateData(List<Double>[] data) {
        chart.updateXYSeries("sine", data[0], data[1], null);
        repaint();
    }

}

然后我们就可以在自己的窗口中显示了...

public class HeartMonitor {

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

    public HeartMonitor() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                HeartMonitorModel model = new DefaultHeartMonitorModel();

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new SeriesChartPane(model));
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }
}

查看Concurrency in Swing 和Worker Threads and SwingWorker 了解有关 Swing 和线程如何工作的更多详细信息

您可能还想复习一下Model-View-Controller 范式