HighCharts Not Adding Series Data Points

Question

I'm having some big trouble with trying to dynamically change data based on date for highcharts. For a better understanding of my program, it logs system data with a timestamp. I have a date and time picker to specify starting and ending date / time to get new data. This gets passed to PHP via JS and Ajax and sends back XML. Javascript then parses the XML into new data for the chart.

As a note, I have tried both removing all series and even tried destroying the chart completely but for some reason I cannot get it to add series points back into the chart. Another note is that I use a JS function to generate the chart.

Here is the JS that uses Ajax:

function LoadNewCPUData(fromdate, todate, serverid) {
    var chart = $('#cpuContainer').highcharts().series[0].remove();
    $.ajax({
        type : "GET",
        url : "js/ajax.php?page=cpudata&fromdate=" + encodeURIComponent(fromdate) + "&todate=" + encodeURIComponent(todate) + "&serverid=" + serverid,
        dataType : "xml",
        success : function(xml) {
            var cpudata = [];
            var timestamps = [];
            $(xml).find('cpudata').each(function() {
                cpudata.push($(this).attr('cpu'));
                var t = $(this).attr('timestamp').split(/[- :]/);
                var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
                timestamps.push(formatDate(d));
            });
            GenerateCPU(timestamps, cpudata);
        }
    });
}

As you can see the function parses the xml data into two arrays (timestamp and cpudata) and then sends it off to GenerateCPU. formatDate is defined in another function. I can show it if needed, however I don't believe it is relevant (more on that below). Here is GenerateCPU:

function GenerateCPU(times, cpuInfo) {
        $('#cpuContainer').highcharts({
            chart : {
                type : 'line'
        },
        credits : {
            enabled : false
        },
        title : {
            text : 'CPU Usage'
        },
        tooltip : {
            valueSuffix : '%'
        },
        xAxis : {
            categories : times
        },
        yAxis : {
            title : {
                text : 'CPU Usage',
            },
            tickInterval : 1,
            min : 0,
            max : 100
        },
        series : [{
            name : 'CPU Usage',
            data : cpuInfo
        }]
    });
}

The weird part of the whole thing is that the chart shows the correct data for the xAxis (which is defined in the parameters of GenerateCPU). However no matter what I do I can't get it to show series data. I have also tried chart.addSeries but that too doesn't work. The cpudata array HAS data both before it sends it to GenerateCPU and while in GenerateCPU. Just to show it, here is an example of the XML:

<cpuinfo>
    <cpudata timestamp="2015-08-06 20:20:31" cpu="15"/>
</cpuinfo>

I'm hoping that this isn't too long and somebody can give it a read. Anybody have any ideas of what I am doing wrong?

Thank you!

Answer 1

如果第一个图表正确显示，则在尝试更新数据之前，问题可能来自重新定义图表。我建议您使用Highcharts的update()功能动态更新series和xAxis。

修改

那么你的代码会变成什么：

function LoadNewCPUData(fromdate, todate, serverid) {
    $.ajax({
        type : "GET",
        url : "js/ajax.php?page=cpudata&fromdate=" + encodeURIComponent(fromdate) + "&todate=" + encodeURIComponent(todate) + "&serverid=" + serverid,
        dataType : "xml",
        success : function(xml) {
            var cpudata = [];
            $(xml).find('cpudata').each(function() {
                var t = $(this).attr('timestamp').split(/[- :]/);
                var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
                cpudata.push({name: formatDate(d), y: parseInt($(this).attr('cpu'))});
            });
            GenerateCPU(cpudata);
        }
    });
}

你GenerateCPU功能变为：

function GenerateCPU(cpuInfo) {
        $('#cpuContainer').highcharts({
            chart : {
                type : 'line'
        },
        credits : {
            enabled : false
        },
        title : {
            text : 'CPU Usage'
        },
        tooltip : {
            valueSuffix : '%'
        },
        xAxis : {
            type: 'category'
        },
        yAxis : {
            title : {
                text : 'CPU Usage',
            },
            tickInterval : 1,
            min : 0,
            max : 100
        },
        series : [{
            name : 'CPU Usage',
            data : cpuInfo
        }]
    });
}

这会给你一个不同的结果吗？

<强> RE-修改

您的错误14被抛出，因为您传递的是字符串而不是数字。使用上面的函数parseInt()来避免它。 （如果你有小数，则使用parseFloat()）