如何使用实时数据连续更新折线图 [英] How to continuously update line chart with live data

问题描述

我有两个折线图，在一个折线图中，即chart1，我正在连续更新值，在其他图表即chart2中，基于chart1的峰值，我试图在chart2中显示chart1的峰值。如果峰值（即4到10）的数量较少则没有问题，如果峰值较大，则我的折线图应用程序变得太慢。为了不断更新chart1和chart2中的值，我使用了动画计时器。

I am having two line charts, in one of the line chart i.e chart1, i am updating values continuously, in other chart i.e chart2, based on peak values of chart1, i am trying to show the peak values of chart1 in chart2. If peak values(i.e 4 to 10) are in less number then there is no problem, if peak values are more, then my line chart application is becoming too slow. For continuously updating values in chart1 and chart2 i used Animation timer.

以下是几个峰值

Below is with few peak values

下面的图片有更多的峰值然后我的应用程序挂起了

Below image is having more peak values then my application is hanging

为了更好的表现，如何处理动画计时器。

For better performance how to do with animation timer .

CODE UPDATE

在addDataToSeries函数中，我添加了1600个随机值并在chart1中填充值。

In addDataToSeries function i am adding 1600 random values and populating values in chart1.

在addRffDataToSeries函数中，我填充了chart2中的峰值值

In addRffDataToSeries function, i am populating peak values in chart2

    private void prepareTimeLine() {
    timer = new AnimationTimer() {

        @Override
        public void handle(long l) {
            plotData.addDataToSeries();

        }
    };

}

private void startTimer() {
    timer.start();
}

private void stopTimer() {
    timer.stop();
    System.out.println("  " + lineChart.getData().size());
    System.out.println(" " + series.getData().size());
    if (lineChart.getData().size() > 0) {
        series.getData().remove(0, series.getData().size());
    }
}

private void prepareRffTimeLine() {
    rffTimer = new AnimationTimer() {

        @Override
        public void handle(long l) {
            rffSeries.getData().remove(0, rffSeries.getData().size());
            plotData.addRffDataToSeries();
        }
    };

}

private void startRffTimer() {
    rffTimer.start();
}

private void stopRffTimer() {
    rffTimer.stop();
    if (rffLineChart.getData().size() > 0) {
        rffSeries.getData().remove(0, rffSeries.getData().size());
    }
}

public void addDataToSeries() {

    double x = 0;
    double y = 0;
    int i = 1;

    seriesXData.clear();
    seriesYData.clear();
    for (i = 1; i <= 1596; i++) {
        x = Math.random() * i + 1;
        y = (Math.random() * ((-100) - (-130))) + -130;
        seriesXData.add(new XYChart.Data(x, y));
        seriesYData.add(new XYChart.Data(x, y));
    }

    seriesXData.add(new XYChart.Data(300.0, -60.0));
    seriesXData.add(new XYChart.Data(600.0, -50.0));
    seriesXData.add(new XYChart.Data(900.0, -30.0));
    seriesXData.add(new XYChart.Data(1300.0, -10.0));

    seriesYData.add(new XYChart.Data(300.0, -60.0));
    seriesYData.add(new XYChart.Data(600.0, -50.0));
    seriesYData.add(new XYChart.Data(900.0, -30.0));
    seriesYData.add(new XYChart.Data(1300.0, -10.0));

    Collections.sort(seriesXData, new ArrangeXData());
    Collections.sort(seriesYData, new ArrangeYData());
    series.getData().addAll(seriesXData);

    if (series.getData().size() > 1600) {
        series.getData().remove(0, 1600);
    }


}

public void addRffDataToSeries() {

    Comparator<XYChart.Data<Double, Double>> c = new Comparator<XYChart.Data<Double, Double>>() {
        @Override
        public int compare(XYChart.Data<Double, Double> o1, XYChart.Data<Double, Double> o2) {
            return o1.getYValue().compareTo(o2.getYValue());
        }
    };

    int index = Collections.binarySearch(seriesYData, new XYChart.Data<Double, Double>(null, Double.parseDouble(String.valueOf(Line.y))), c);

    int insertion_point = -(index + 1);
    if (seriesYData.size() <= 0) {
        return;
    }
    List<XYChart.Data<Double, Double>> res = seriesYData.subList(insertion_point, seriesYData.size());

    for (int ind = 0; ind < res.size(); ind++) {
        for (int pos = Bounds.x; pos > Bounds.y; pos--) {
            rffSeries.getData().add(new XYChart.Data(res.get(ind).getXValue(), pos));
        }

    }


}

推荐答案

从任何来源获取来自某些Web服务调用或读取某个队列的数据。你需要延迟输入数据。可能是半秒延迟应该没问题。这是因为进入浏览器的数据量太大，而且无法处理相同的数据量。

From what ever source you getting the data from some web service call or reading for some queue. you need to delay the input data. may be a half second delay should be fine. This is because the volume of data coming to the browser is too much, and it is not able to handle the same.

其次，确保在点移出屏幕后关闭连接，这样可以减少打开连接的数量并提高性能。

Secondly, make sure you close your connection once your point moves out of the screen, this is reduce the number of open connections and improve performance.

这篇关于如何使用实时数据连续更新折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！