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

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 由数据时间和瓦特值组成。具有多个 json objects，由每个 node-ID、名称和数据（时间日期和值）组成。

当它检索过去的数据时，它会使用系列中的数据创建一个图表，并通过帮助程序分配元素 ID、标题和数据 "getChartConfig"，然后将该图表推送到图表数组。

这呈现得很好，但暂时没有显示在工具提示中。但它调用函数 requestdata() 获取最新日期时间和瓦特值的 JSON。我解析 json 并调用函数 addpoint 的系列，在这种情况下我发送的数据是 item.data，（因为我迭代解析的 Json 数组。

这是添加点的时间，当线从历史数据的起点而不是历史数据的终点绘制时。好像没有看到之前的数据。

任何建议都非常适用，例如如何从现有数据的最后一个点绘制添加点。

Answer 1

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

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

When adding point on dynamically created Multiple Highchart Graphs on a single page, the plot line draws to the start point instead of last point?

javascript

jquery

plot

drawing

highcharts