javascript - HighCharts 不添加系列数据点

Question

我在尝试根据 Highcharts 的日期动态更改数据时遇到了一些大麻烦。为了更好地理解我的程序，它使用时间戳记录系统数据。我有一个日期和时间选择器来指定获取新数据的开始和结束日期/时间。该信息通过 JS 和 Ajax 传递给 PHP 并发送回 XML。然后，Javascript 将 XML 解析为图表的新数据。

作为说明，我尝试删除所有系列，甚至尝试完全销毁图表，但由于某种原因，我无法将系列点添加回图表中。另外需要注意的是，我使用 JS 函数来生成图表。

这是使用Ajax的JS:

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);
        }
    });
}

正如您所看到的，该函数将 xml 数据解析为两个数组(时间戳和 cpudata)，然后将其发送到GenerateCPU。 formatDate 在另一个函数中定义。如果需要，我可以展示它，但我不认为它是相关的(更多内容见下文)。这是生成CPU:

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
        }]
    });
}

整个事情的奇怪部分是图表显示了 xAxis 的正确数据(在GenerateCPU 的参数中定义)。但是，无论我做什么，我都无法让它显示系列数据。我也尝试过 Chart.addSeries 但这也不起作用。 cpudata 数组在发送到GenerateCPU 之前和在GenerateCPU 中都有数据。为了展示这一点，下面是一个 XML 示例:

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

我希望这不会太长，有人可以读一下。有人知道我做错了什么吗？

谢谢!

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
        }]
    });
}

这会给你带来不同的结果吗？

重新编辑

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