如何减缓Highcharts情节

时间:2016-04-13 15:11:56

标签: javascript plot highcharts

1。 嗨,我想知道你的意见。我试图绘制从数据库中获取的一些信号。一切都运行良好,我想在10秒窗口内绘制EKG信号。我一次拿2500个样本来做它由Json和情节发送它而不是Highcharts JS。问题是渲染JS的默认情况是500ms。我希望它更像是在医院监测中的情节...减慢速度。怎么做到呢?

2。 并且请知道是否有可能将X轴设置为计数器,它每次渲染新图表时都会标记值? ......就像渲染的每1250个值一样,它将显示在X轴5上2500之后它将是10 .......我想将它从计数值更改为时间轴......值的频率为250 ms

这是代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script> 

  var ID = 1;

 $(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'line', 
            animation: 'false'
        },
        series: [{marker: {
                    enabled: false
                }}]
    };

    function posielanie () {
      $.getJSON("data.php",{posielam : ID},  function(data) {
        options.series[0].data = data;
        console.log(data);
        var chart = new Highcharts.Chart(options);
        ID = ID+2500;
      });
      setTimeout(posielanie, 2000);      
    }
    posielanie ();                    
});


  </script>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
    <div id="container" style="height: 300px"></div>
  </body>
</html>

和data.php

<?php

header('Content-Type: application/json');

$con = mysqli_connect("ADRESS","USER","PSW","TBL");


$a= $_GET['posielam'];  

if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
      $result = mysqli_query($con, "SELECT * FROM samples LIMIT $a, 2500 ");     
     while ( $row= mysqli_fetch_array($result)){
      $out[]=$row['sample'];
     }

    echo json_encode($out, JSON_NUMERIC_CHECK);   
}
mysqli_close($con); 

?>

1 个答案:

答案 0 :(得分:1)

您需要使用plotOptions.series.animation选项,如下所示:

    plotOptions: {
        series: {
            animation: {
                duration: 1000
            }
        }
    },

Example fiddle - 尝试更改持续时间以查看不同的渲染时间

Link to relevant Highcharts docs