Highcharts 通过Socket.IO更新Sankey图表

我想在新实体通过socket.io套接字到达时更新我的sankey图表实体。套接字发送的数据是[sender，receiver，amount]，因此我拥有使用Highcharts的sankey所需的所有参数。我确信收到的数据

我添加了一个函数来执行此操作，但它无法生成任何内容

<script>
    var render = Highcharts.chart('container', {
            title: {
                text: 'Real Time Chart'
            },

            chart: {
                type: 'sankey',
                renderTo: 'container',
                events: {
                    load: function() {
                        var socket = io.connect();
                        var series = this.series;
                        socket.on('message', function(data){
                            console.log(data);
                            series.addPoint([data.sender, data.receiver, data.amount], true, true);
                        });
                    }
                }
            },

            series: [{
                type: 'sankey',
                name: 'Initial data',
                keys: ['sender','receiver','amount'],
                data: (function() {
                    // generate some points to render before real samples arrive from feed
                    var data = []   
                    data.push({
                        sender: 'Brazil',
                        receiver: 'Portugal',
                        amount: 50
                    });
            return data;
        })()
    }]
});

    </script>

var render=Highcharts.chart（'容器'{
标题：{
文本：“实时图表”
},
图表：{
键入：“sankey”，
renderTo:'容器'，
活动：{
加载：函数（）{
var socket=io.connect（）；
var系列=本系列；
socket.on（'message'，函数（数据）{
控制台日志（数据）；
series.addPoint（[data.sender，data.receiver，data.amount]，true，true）；
});
}
}
},
系列：[{
键入：“sankey”，
名称：'初始数据'，
关键字：[“发件人”、“收件人”、“金额”]，
数据：（函数（）{
//在真实样本从源到达之前生成一些要渲染的点
var数据=[]
数据推送({
发件人：“巴西”，
接收人：“葡萄牙”，
金额：50
});
返回数据；
})()
}]
});

---

我希望动态更新图表。

您不能对对象使用

键

属性。您需要使用Highcharts系列所需的格式：

series: [{
    ...,
    data: (function() {
        // generate some points to render before real samples arrive from feed
        var data = []
        data.push({
            from: 'Brazil',
            to: 'Portugal',
            weight: 50
        });
        return data;
    })()
}]

现场演示：

API参考：

---

您不能对对象使用

键

属性。您需要使用Highcharts系列所需的格式：

series: [{
    ...,
    data: (function() {
        // generate some points to render before real samples arrive from feed
        var data = []
        data.push({
            from: 'Brazil',
            to: 'Portugal',
            weight: 50
        });
        return data;
    })()
}]

现场演示：

API参考：

---

感谢您的澄清。非常感谢。通过socket.io进行实时更新有什么建议吗？我正在尝试向系列中添加新数据，以便随着时间的推移使用新数据为highchart制作动画，但无法进行此操作。Hi@Abhishek Malik，请尝试使用以下代码：

.addPoint（{from:data.sender，to:data.receiver，weight:data.amount}）

。如果这没有帮助，请向我提供您接收到的数据的示例（

console.log（data）；

在“message”事件中）。感谢您的澄清。非常感谢。通过socket.io进行实时更新有什么建议吗？我正在尝试向系列中添加新数据，以便随着时间的推移使用新数据为highchart制作动画，但无法进行此操作。Hi@Abhishek Malik，请尝试使用以下代码：

.addPoint（{from:data.sender，to:data.receiver，weight:data.amount}）

。如果这没有帮助，请向我提供您接收到的数据的示例（

console.log（data）；

在“message”事件中）。