javascript - Highchart 实时服务器示例使用大量 CPU

Question

我有一个嵌入式 linux 系统，它收集一些数据并将其放入 SQLite 数据库中。每秒添加新数据。我想从数据库中获取这些数据，并使用 highchart 将其实时绘制在图表中。因此，每一秒都需要将一个新点添加到图表中。

我使用以下示例作为起点:http://www.highcharts.com/studies/live-server.htm

它可以工作，但是当我访问该页面时，我的 CPU 使用了 50%(我使用 chrome)。如果我绘制 morge 图，甚至是 100%。即使使用实时服务器示例，我也可以看到我的 CPU 使用率在上升。我试着寻找遮阳篷，但找不到任何东西。这是最好的方法吗？或者这是一个错误还是我遗漏了什么？这是我的一些代码:

function request_accu_Data() {
    $.ajax({
        url: 'live-accu-data.php', 
        success: function(point) {
            var accu_series = accu_chart.series[0];
                shift = accu_series.data.length > 100; // shift if the series is longer than 100

            // add the point
            accu_chart.series[0].addPoint(eval(point), true, shift);

            // call it again after one second
            setTimeout(request_accu_Data, 500); 
        },
        cache: false
    });
}

$(document).ready(function() {
    accu_chart = new Highcharts.Chart({
        chart: {
            renderTo: 'Accu_graph_container',
            defaultSeriesType: 'spline',
            events: {
                load: request_accu_Data
            }
        },

        tooltip: {
             formatter: function() {

              return false;
               }
        },
            title: {
            text: 'Accu level'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 150,
            maxZoom: 20 * 1000
        },
        yAxis: {
            minPadding: 0.9,
            maxPadding: 0.9,
            min: 0,
            max: 100,
            title: {
                text: '%',
                margin: 10
            }
        },
        series: [{
            //pointInterval: 3600 * 1000,
            name: 'Accu level',
            data: [
            ]
        }]
    });

PHP 代码如下所示:

<?php 
// Set the JSON header
header("Content-type: text/json");


$db = new PDO('sqlite:/home/pi/client.db');
$result = $db->query('SELECT * FROM log ORDER BY ROWID DESC LIMIT 1');
foreach($result as $row){
    $ret = intval( $row['Timestamp'])*1000;
    $ret2= intval( $row['Accu_level']);
}

$tot = array($ret,$ret2);

echo json_encode($tot);
?>

我真的希望你能帮助我!

Answer 1

我唯一能想到的建议是:

1. 减少轮询服务器的频率。您目前每 500 毫秒轮询一次。
2. 在 highcharts 中禁用动画。
3. 如果您要向超过 1 个系列添加点，请在不重新绘制图表的情况下添加每个点，然后在最后重新绘制。

注意，要禁用动画，您需要设置:

animation:false

在图表定义中，但您还需要在 addPoint 调用中禁用它。

accu_chart.series[0].addPoint(eval(point), true, shift, false);