Question

请求是动态加载CPU使用率，内存使用率等实时数据，并使用highcharts将数据转换为图表。这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>netdata_test</title>
    <script src="jquery-1.12.3.js"></script>
    <script src="highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;width:1200px;height:400px;"></div>

    <script>
        $(function () {
            $(document).ready(function() {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

                $('#container').highcharts({
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg, 
                        marginRight: 10,
                        events: {
                            load: function() {
                                // set up the updating of the chart each second
                                var series = this.series;
                                setInterval(function() {
                                    var result = get_y_data();
                                    var y_result = rebuild_y_data();
                                    for(var i=0;i<series.length;i++){
                                        //define the value of x and y
                                        //the value of x is time
                                        //the value of y is usage
                                        //however,I didn't get the result that I wish to see
                                        //wondering there is something wrong with this function
                                        var x = result[i].data[0];
                                        var y = y_result[i];
                                        series[i].addPoint(y,true,true);
                                    }
                                   }
                                }, 1000);
                            }
                        }
                    },
                    title: {
                        text: 'Live random data '
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Value'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
                                    Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    plotOptions: {
                        line: {
                            dataLabels: {
                                enabled: true
                            },
                            enableMouseTracking: false
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series:create()
                });
            });
        });

        //get data with time
        function get_y_data() {
            var data = [];
            $.ajax({
                async: false,
                url: "netdata_with_time.json",
                success: function (response) {
                    var key = Object.keys(response.data);
                    var size = key.length;
                    for (var i = 0; i < size; i++) {
                        var steal = response.data[i];
                        data.push({"data":steal});
                    }
                }
            });
            return data;
        }

        //first time load data
        function create() {
            var series = [];
            $.ajax({
                type: "POST",
                url: "netdata_with_time.json",
                async: false, 
                success: function(result){
                    var channels = Object.keys(result.data);
                    var size = channels.length;
                    for(var i=0; i<size; i++) {
                        var data = $.grep(result.data[i],function(n,i){
                            return n < 100
                        });
                        series.push({"data":data});
                    }
                }
            }, false); 
            return series;
        }

        //get data without time
        function rebuild_y_data(){
            var y_array = [];
            var old_y = get_y_data();
            for(var i=0;i<old_y.length;i++){
                var new_y = $.grep(old_y[i].data,function(n,i){
                    return n < 100
                });
                y_array.push(new_y);
            }
            return y_array;
        }

</script>
</body>
</html>

以下是netdata_with_time.json的内容

{
  "labels": ["time", "steal", "softirq", "user", "system", "nice", "iowait"],
  "data":
  [
    [ 1463450420000, 0, 0.25099, 0.25099, 3.00799, 3.00852, 0.25099],
    [ 1463450422000, 0, 0.25152, 0.25226, 2.5189, 2.01438, 0],
    [ 1463450424000, 0, 0, 0.25026, 2.01521, 2.76598, 0],
    [ 1463450426000, 0, 0, 0, 4.02518, 2.51662, 0],
    [ 1463450428000, 0, 0.25381, 0, 4.78807, 6.04569, 0],
    [ 1463450430000, 0, 0.49751, 0.25097, 6.99208, 5.50262, 0],
    [ 1463450432000, 0, 0.25137, 0.50043, 8.27151, 6.76643, 0],
    [ 1463450434000, 0, 0.25151, 0.50251, 3.77062, 7.79477, 0],
    [ 1463450436000, 0, 0.25126, 0.49878, 15.76944, 15.00074, 2.25758],
    [ 1463450438000, 0, 0, 0, 11.16972, 23.60662, 4.06267],
    [ 1463450440000, 0, 0.51502, 0.25751, 23.84824, 31.05425, 3.36508],
    [ 1463450442000, 0.25071, 0, 0.25097, 21.84656, 37.19673, 0.25097],
    [ 1463450444000, 0, 0.24531, 0, 19.11278, 27.2775, 0],
    [ 1463450446000, 0, 0, 0.25285, 17.83818, 43.75804, 0.24968],
    [ 1463450448000, 0.25168, 0.25168, 0, 16.40334, 37.63628, 0],
    [ 1463450450000, 0, 0.24959, 0.25126, 11.76487, 42.61857, 0.25126],
    [ 1463450452000, 0, 0.50289, 0.00089, 8.81355, 44.83934, 0.25215],
    [ 1463450454000, 0, 0.00086, 0, 2.02033, 52.24931, 0.00086],
    [ 1463450456000, 0.25126, 0, 0.25, 2.00502, 51.6294, 0],
    [ 1463450458000, 0.24958, 0, 0, 1.24875, 52.75178, 0]
  ]
}

这是我代码的输出。

每次加载数据时，输出都会像上面的pictrue一样显示。但我希望显示如下图片。

请帮帮我。

Highcharts动态添加点

0 个答案: