在单个页面上添加动态创建的多个高清图表上的点时，绘图线是否绘制到起点而不是最后一个点？

Question

var charts = [];
// change to an empty string to use the global namespace
var getChartConfig = function(renderId, title, data) {
    var config = {};
    config.chart = {
        renderTo: renderId,
        type: 'spline',
        width: 450,
        height: 300
    };
    config.title = {
        text: title
    };

    config.legend = {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    };
    config.yAxis = {
        min: 0,
        title: {
            text: 'watts'
        }
    };
    config.xAxis = {
        type: 'datetime'
    };
    config.tooltip = {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} watts</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    };
    config.series = [{
        name: title,
        data: data
    }];

    return config;
};

$(document).ready(function() {

    $.ajax({
        url: '/node/watts/data',
        success: function(msg) {
            var list = $.parseJSON(msg);
            $.each(list, function(i, item) {
                if (($('#node-' + item.nodeId + '-value').length) == 1)
                    series = item.data
                charts.push(new Highcharts.Chart(
                    getChartConfig('node-' + item.nodeId + '-chart', item.name, series)
                ))
            });
        }
    })
    var i = 0

    function socketloop() {
        setTimeout(function() {
            i = i + 1
            requestData();
        }, 5000);
    }
    socketloop();
    setInterval(socketloop, 5000)

});

function requestData() {
    $.ajax({
        url: '/node/watts/test/2',
        success: function(point) {
            var myObject = JSON.parse(point);
            console.log("============= " + myObject)
            $.each(myObject, function(i, item) {
                for (x = 0; x < charts.length; x++) {

                    if (charts[x].series[0].name == item.name) {
                        console.log("============= " + item.data)
                        shift = charts[x].series[0].data.length > 20; // shift if the series is 
                        charts[x].series[0].addPoint(item.data, true, shift);
                    }

                }

            });
            cache: false
        }
    });
}

我有两个ajax调用来请求过去的数据，第二个ajax用于重新获取最新的数据。 Json由数据时间和瓦特值组成。使用由每个节点ID，名称和数据组成的多个json对象（时间和值）。

当它检索过去的数据时，它会创建一个包含系列数据的图表，并通过帮助程序“getChartConfig”分配元素id，title和data，并将该图表推送到图表数组。

这样可以很好地呈现，但是时间不会显示在工具提示中。 但它调用函数requestdata（）获取最新DateTime和瓦特值的JSON。我解析json和系列我调用函数addpoint和我发送的数据在这种情况下它是item.data，（因为im迭代解析的Json数组。

这是在添加点并且从历史数据的起点而不是历史数据的结束点绘制线时。 看起来似乎没有看到先前的数据。

如果从现有数据的最后一点开始添加点绘制，任何建议都会被大量注释。

Answer 1

确保您的数据按x升序排序。