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> 

이 Intially 티켓의 수는 20이지만, 최대한 빨리 컬을 사용하여 데이터를 게시로 판매 티켓의 수는 증가해야 가능한 티켓 따라 감소한다, 내 클라이언트 측 코드 이벤트에.

어떻게해야합니까?

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); 

는 여기에 & 붙여 넣기 오류를 복사합니다.