javascript - Highchart StockChart - 更新最后点值

Question

我正在尝试实现一个 ajax stockchart，它需要每秒更新一次，但每分钟累加总值(value)。当它检测到新的分钟值时，一切都工作正常，但是当我尝试更新最后一个点值(最后一分钟)时，我无法得到它，因为我收到控制台错误，说它无法识别属性。

aaa2.php:107 Uncaught TypeError: Cannot read property 'update' of undefined
    at Object.success (aaa2.php:107)
    at i (jquery-3.1.1.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.1.1.min.js:2)
    at A (jquery-3.1.1.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-3.1.1.min.js:4)

这是更新最后一点的部分代码。

series[0].data[0].update(500);  

这是我用来了解如何解决我的问题或任何共享解决方案的完整代码。

<script type="text/javascript">
   $(function() {
        var ultima_fecha;
        var ultimo_tx100;
            Highcharts.setOptions({
             global: {
            useUTC: true
             }
        }); // end Highcharts.setOptions


$.ajax({
                url: "/proyectos/method/ajax_spline.php",
                type: 'get',
                dataType: "json",
                success: function(DatosRecuperados) {
                var matrix=new Array();
                $.each(DatosRecuperados, function(i,o){

                    var my_utc=Date.UTC(parseInt(o.anio),parseInt(o.mes),parseInt(o.dia),parseInt(o.hora),parseInt(o.x));


                    if (o.x) {DatosRecuperados[i].x =parseInt(my_utc);}
                    if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
                });

                set_fecha(DatosRecuperados[(DatosRecuperados.length)-1].x);
                set_tx100(DatosRecuperados[(DatosRecuperados.length)-1].y);
                //console.log(DatosRecuperados.length);

      var my_chart=$('#container').highcharts('StockChart', {
        chart: {
            type:'spline',
            animation: Highcharts.svg,

          events: {
            load: function () {
                series = this.series[0];
            }
          }
        },plotOptions: {
            dataGrouping: {
            enabled: false
            },
            spline: {
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                }
            }
        },

        title: {
          text: 'Live random data'
        },

        exporting: {
          enabled: false
        },

        series: [{
          name: 'Random data',
          data: DatosRecuperados
        }]

      }); //end highchart
} //end success ajax


 }); //end ajax 

}); //end doc ready


setInterval(function () {

                $.get( "/proyectos/method/ajax_spline.php?Consultar=1", function( UltimosDatos ) {
                    var UltimosDatos=$.parseJSON(UltimosDatos);
                    //var varlocalx=parseFloat(UltimosDatos[0].x);
                    var varlocalx=Date.UTC(parseInt(UltimosDatos[0].anio),parseInt(UltimosDatos[0].mes),parseInt(UltimosDatos[0].dia),parseInt(UltimosDatos[0].hora),parseInt(UltimosDatos[0].x));
                    var varlocaly=parseFloat(UltimosDatos[0].y);
                 if((get_fecha()==parseInt(varlocalx))&&(get_tx100()!=varlocaly)){   
                    //console.log(varlocaly);
                        series[0].data[0].update(500);            

                    }
                 if((get_fecha()!=parseInt(varlocalx))&&(get_tx100()!=varlocaly)){

                    series.addPoint([parseInt(varlocalx), varlocaly], true, true);
                    set_fecha(varlocalx);
                    set_tx100(varlocaly);
                }
           });}, 1000);

  function get_fecha(){return ultima_fecha;}
   function set_fecha(x){ ultima_fecha=x;}

   function get_tx100(){return ultimo_tx100;}
   function set_tx100(y){ ultimo_tx100=y;} 

</script>

Answer 1

您在全局变量series中创建对第一个图表系列的引用:

series = this.series[0];

因此，您应该以这种方式更新第一点:

 setInterval(function() {
     series.points[0].update({
         y: Math.random() * 1000
     });
 }, 1000);

要正确禁用dataGrouping:

         plotOptions: {
             series: {
                 dataGrouping: {
                     enabled: false
                 },
             },

             spline: {
                 ...
             }
         }

现场演示:http://jsfiddle.net/BlackLabel/6m4e8x0y/2091/

API:https://api.highcharts.com/highstock/plotOptions.series.dataGrouping.enabled