javascript - 使用 Socket.io 实时更新 Highcharts

Question

我正在使用 node.js、socket.io 和 highcharts 制作仪表板。

我希望我的图表在收到来自 socket.io 的请求时动态更新。

我该怎么做？

这是我的客户端代码，

<script>
var socket=io();
var sales=0;
var e1tcount=0;
var e1scount=0;
var e2tcount=0;
var e2scount=0;

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                events: {
                    load: function(){

                        socket.on('response', function(arr){
                            $('#c1').html(arr[0]);
                            sales+=arr[2];
                            $('#sales').html(sales);

                            if(arr[1]=="CT")
                            {
                                e1tcount++; 
                                $('#e1t').html(e1tcount);
                                e1scount+=arr[2];
                                $('#e1s').html(e1scount);
                                //Tried this, doesnt work 
                                var sold=chart.series[0].data[0].y;
                                chart.series[0].data[0].update(sold+1);
                            }
                            if(arr[1]=="AB")
                            {
                                e2tcount++;
                                $('#e2t').html(e2tcount);
                                e2scount+=arr[2];
                                $('#e2s').html(e2scount);
                            }
                        });

                    }
                }
            },
            title: {
                text: 'Stacked column chart'
            },
            xAxis: {
                categories: ['Event 1', 'Event 2']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },
            legend: {
                align: 'right',
                x: -70,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            colors: ['#FFCC99','#3366CC'],
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                        style: {
                            textShadow: '0 0 3px black, 0 0 3px black'
                        }
                    }
                }
            },
            series: [{
                name: 'Sold',
                data: [0, 0]
            }, {
                name: 'Available',
                data: [20, 20]
            }]
        });
    });




</script>

最初的门票数量是 20，但是一旦我使用 curl 发布数据，售出的门票数量应该会增加，而可用的门票数量应该会减少，具体取决于事件。

我该怎么办？

Answer 1

你在控制台有什么错误？ ;) 我猜想“无法读取 udefined 的属性”。您需要先创建图表变量，然后才能使用该变量，对吗？所以:

    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                load: function(){
                    var chart = this; // create chart variable for future use
                    socket.on('response', function(arr){

那么这段代码应该可以工作了:

                            //Tried this, doesnt work 
                            var sold=chart.series[0].data[0].y;
                            chart.series[0].data[0].update(sold+1);

如果这还不够，请在此处复制并粘贴错误。