通过Socket.IO更新Sankey图表

Question

我想在通过socket.io套接字到达新的Sankey图表实体时进行更新。套接字发送的数据是[发送者，接收者，数量]，所以我拥有使用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>

我希望动态更新图表。

Answer 1

您不能对对象使用keys属性。您需要使用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;
    })()
}]

实时演示： http://jsfiddle.net/BlackLabel/jrgas7Lm/

API参考：

https://api.highcharts.com/highcharts/series.sankey.data

https://api.highcharts.com/highcharts/series.sankey.keys