【问题标题】:Highchart StockChart - Update last point valueHighchart StockChart - 更新最后点值
【发布时间】:2019-01-29 14:41:31
【问题描述】:

我正在尝试实现一个需要每秒更新但每分钟累积总值的 ajax 股票图表。当它检测到新的分钟值时一切正常,但是当我尝试更新最后一个点值(最后一分钟)时,我无法得到它,因为我收到控制台错误,说它无法识别属性。

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>

【问题讨论】:

标签: javascript php jquery mysql highcharts


【解决方案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

【讨论】:

  • 感谢您的回答,看来我的问题是我没有正确禁用 dataGrouping,但是我无法仅更新最后一个点值。
  • @user2570870,请分析这个例子:jsfiddle.net/BlackLabel/6m4e8x0y/2134 - 和你的情况非常相似。
  • 这是一个非常好的示例,它的工作原理很简单。顺便说一句,当我开始运行图表时,例如我的 ajax(每秒)从上午 9 点开始返回值,现在是 14.06,整个数据都消失了,我只得到最后 8 分钟的信息。我必须刷新站点才能看到历史信息,有什么办法可以不丢失信息而不是刷新页面?
  • @user2570870,我不知道您当前的代码是什么,但是如果您仅在某些特定数据点上使用update 方法,那么您的图表应该像我的示例一样工作。
  • 亲爱的 ppotaczek,我的实际代码是在我的问题中更新的代码,实际上我的问题已根据您的建议解决,但现在似乎我从导航器中丢失数据,我只保留最后 8 分钟,即使我有超过 12 小时的更多信息。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-11-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-10-22
相关资源
最近更新 更多