从 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/ ：该站点帮助我为实时图形创建了一个基础 class，但无法帮助将其集成到 JPanel 中或如何通过重绘使其成为 "real-time"( ）或更新（）。并不是说必须使用 repaint() 或 update() 。我愿意接受几乎所有的建议。

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

补充说明
我只是无法将 getRandomRealTimeGraph() 调用到 return 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();
    }

}

然后我们可以在自己的window...

中展示

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 and Worker Threads and SwingWorker 了解有关 Swing 和线程如何工作的更多详细信息

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

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

Adding multiple real-time graphs from XChart onto a JPanel

java

user-interface

swing

graph

jtabbedpane