Question

我正在使用Highcharts绘制图表。我需要进行AJAX调用以获取数据，然后使用该数据绘制图表。我正在使用JQuery。以下是代码。

<html>
<head>
<title>Metrics info</title>
<script type="text/javascript" 
   src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script type="text/javascript">
$(function () {

        var data = {
        };

        var v_series = [{
            data: []
        }], v_categories = []; 

        function ajaxcall() {
            $.ajax({
                url: "http://localhost:8080/metricgraph/helloWorld.do",
                type: "GET",
                async: false,
                dataType: 'text',
                success: function (response) {
                    var arr = response.split("|");

                    for (i = 0; i < arr.length; i++) { 
                        var temp = arr[i].split(",");
                        data[temp[0]] = Number(temp[1]);
                    } 

                     for(var category in data) {
                         var points = data[category];
                         v_categories.push(category);
                         v_series[0].data.push(points); 
                    }
                }
              });
        }

    $(document).ready(function () {
        ajaxcall();
        setInterval(ajaxcall,60000);

        $('#container').highcharts({
            chart: {
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
            },
            title: {
                text: 'Live metrics data'
            },
            xAxis: {
                title: {
                    text: 'Time'
                },
                categories: v_categories,
                tickPixelInterval: 150
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                min:0,
                tickInterval: 10,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>'+'Value: ' + '</b>' + Highcharts.numberFormat(this.y, 2)  + '<br/>' + '<b>' + 'Time: ' + '</b>' + this.x//Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
                }
            },
             legend: {
                enabled: false
            },
            series: v_series
        });
    });
});

</script> 

</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>

首先，它工作正常的时间。使用从AJAX调用获得的数据正确填充图表。但第二次在病房，图表没有被新数据绘制。相反，它只显示旧数据。

有人可以让我知道我做错了什么。

Highcharts不显示使用AJAX填充的系列

0 个答案: