高图柱形图动态更新ajax

Ajax正在返回将分配给高图列的值，但根据我下面的代码，图表没有定义。首先，我试图创建一个用户定义函数调用AJAX内的功能并没有给予适当的更新的话，我已经把optiion变量，并呼吁从这个即使寿未创建高图柱形图动态更新ajax

低于

对象是代码：

下面

<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>C2S Success %</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 

    <body class="theme-light"> 
    <font color="WHITE"> 
     <marquee behavior="scroll" direction="left" style="background:RED">Testing Etopup Dashboard </marquee> 
    </font> 

    <script type="text/javascript"> 
     var options = { 
     chart: { 
      renderTo: 'chart1', 
      type: 'column', 
      height: 500, 
      width: 530 
     }, 
     title: { 
      text: 'Success %' 
     }, 
     xAxis: { 
      categories: ['Today', 'YesterDay', 'D-7'], 
      title: { 
      text: 'DAYs' 
      } 
     }, 

     plotOptions: { 
      column: { 
      dataLabels: { 
       enabled: true 
      } 
      } 
     }, 
     series: [] 
     }; 
     $(function ready() { 
     $.ajax({ 
      url: 'successper.php', 
      type: 'GET', 
      async: true, 
      dataType: "json", 

      success: function(point1) { 
      options.series = point1; 
      alert(point1); 
      var chart = new Highcharts.Chart(options); 


      setTimeout(ready, 50000); 
      } 
     }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="chart1" style="width: 300px; height: 200px; margin: center"></div> 
</body> 
</html>

是php文件的输出，它会在每个5分钟

[ 
    { 
    name: 'DEL', 
    data: [96.65,96.71,96.37] 
    }, 
    { 
     name : 'MUM', 
     data: [96.22,96.29,96.61] 
    }, 
    { 
     name: 'KOL', 
     data: [97.21,97.56,97.24] 
    }, 
    { 
     name: 'CHN', 
     data: [96.52,96.50,96.67] 
    } 
]

来源

2017-06-15 sunil4ur_s1

尝试使用[this]（http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/series-setdata/）ie'chart.series [0] .setData（point1）;' –

首先的更新，你有你的代码的一些错误。

您在<head>标记内有<body>标记。
$.ajax()期待json响应，但是您的json数据不正确。

有效的JSON数据：

[ 
    { 
     "name": "DEL", 
     "data": [96.65,96.71,96.37] 
    }, 
    { 
     "name" : "MUM", 
     "data": [96.22,96.29,96.61] 
    }, 
    { 
     "name": "KOL", 
     "data": [97.21,97.56,97.24] 
    }, 
    { 
     "name": "CHN", 
     "data": [96.52,96.50,96.67] 
    } 
]

现在，关于这个问题：

我建议遵循这样的：

请返回一个辅助请求功能功能$.ajax()。

实施例：

function request() { 
     return $.ajax({ 
     url: "https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json", 
     type: "GET", 
     async: true, 
     dataType: "json" 
     }); 
}

呼叫请求在$(function(){});块功能。通过在请求函数中使用.done()，您可以从URL获取json数据。在done()函数中构建HighChart内容。

实施例：

$(function() { 
      request().done(function(point) { 
      options.series = point; 
      var chart = new Highcharts.Chart(options); 
      }); 
});

设置load功能在图表选项event对象。然后，使用当前的json数据响应，您可以使用update()系列方法。

Series.update()

更新（对象的选择，[布尔重绘]）更新该系列具有一组新的选项。为了清晰和精确地处理新选项，系列中的所有方法和元素都将被删除，并且从头开始的是。因此，此方法比其他一些实用程序方法（如setData或setVisible）更具成本效益。

参数

选择：要合并到现有期权系列的布尔新的选择。

redraw：Boolean默认为true。是否在系列更改后重新绘制图表。如果在图表上执行更多操作，那么将设为重绘为false并在之后调用chart.redraw（）是个好主意。

例子：

events: { 
    load: function() { 
    var series = this.series[0]; // Get the current series. 
    setInterval(function() { // For every 5 seconds call the request function. 
     request().done(function(point) { 
     series.update(point); // Get the point (json data from the URL) and use the update(point) method. 
     console.log("Updated with this: ", point); 
     }); 
    }, 5000); 
    } 
}

事情是这样的：

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <title>C2S Success %</title> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
 
</head> 
 

 
<body class="theme-light"> 
 
    <font color="WHITE"> 
 
    <marquee behavior="scroll" direction="left" style="background:RED">Testing Etopup Dashboard </marquee> 
 
    </font> 
 

 
    <script type="text/javascript"> 
 
    // (1) 
 
    function request() { 
 
     return $.ajax({ 
 
     url: 'https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json', 
 
     type: "GET", 
 
     async: true, 
 
     dataType: "json" 
 
     }); 
 
    } 
 
    var options = { 
 
     chart: { 
 
     renderTo: "chart1", 
 
     type: "column", 
 
     height: 500, 
 
     width: 530, 
 
     events: { // (3) 
 
      load: function() { 
 
      var series0 = this.series[0]; 
 
      var series1 = this.series[1]; 
 
      var series2 = this.series[2]; 
 
      setInterval(function() { 
 
       request().done(function(point) { 
 
       series0.update({ 
 
        name: point[0].name, 
 
        data: point[0].data 
 
       }); 
 
       series1.update({ 
 
        name: point[1].name, 
 
        data: point[1].data 
 
       }); 
 
       series2.update({ 
 
        name: point[2].name, 
 
        data: point[2].data 
 
       }); 
 
       }); 
 
      }, 5000); 
 
      } 
 
     } 
 
     }, 
 
     title: { 
 
     text: "Success %" 
 
     }, 
 
     xAxis: { 
 
     categories: ["Today", "YesterDay", "D-7"], 
 
     title: { 
 
      text: "DAYs" 
 
     } 
 
     }, 
 

 
     plotOptions: { 
 
     column: { 
 
      dataLabels: { 
 
      enabled: true 
 
      } 
 
     } 
 
     }, 
 
     series: [] 
 
    }; 
 
    // (2) 
 
    $(function() { 
 
     request().done(function(point) { 
 
     options.series = point; 
 
     var chart = new Highcharts.Chart(options); 
 
     }); 
 
    }); 
 
    </script> 
 
    <div id="chart1" style="width: 300px; height: 200px;"></div> 
 
</body> 
 

 
</html>

不要忘记你的successper.php页面更改https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json。

更新：

如你有4个元素，变化的数组：

events: { 
    load: function() { 
    var series = this.series[0]; // Get the current series. 
    setInterval(function() { // For every 5 seconds call the request function. 
     request().done(function(point) { 
     series.update(point); // Get the point (json data from the URL) and use the update(point) method. 
     console.log("Updated with this: ", point); 
     }); 
    }, 5000); 
    } 
}

这样：

events: { 
    load: function() { 
    var series0 = this.series[0]; 
    var series1 = this.series[1]; 
    var series2 = this.series[2]; 
    var series3 = this.series[3]; 
    setInterval(function() { // For every 5 seconds call the request function. 
     request().done(function(point) { 
     series0.update({ 
      name: point[0].name, 
      data: point[0].data 
     }); 
     series1.update({ 
      name: point[1].name, 
      data: point[1].data 
     }); 
     series2.update({ 
      name: point[2].name, 
      data: point[2].data 
     }); 
     series3.update({ 
      name: point[3].name, 
      data: point[3].data 
     }); 
     }); 
    }, 5000); 
    } 
}

更新：所述successper.php的PHP代码从我的演示网站页面。

<?php 
header("Access-Control-Allow-origin: *"); 
header("Content-Type: application/json"); 
header("Cache-Control: no-cache"); 

$min = 0; 
$max = 100; 

$array = array(array(name => "DEL", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)), 
     array(name => "MUM", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)), 
     array(name => "KOL", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10)), 
     array(name => "CHN", data => array(mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10, mt_rand ($min*10, $max*10)/10))); 
echo json_encode($array); 
flush(); 
?>

你可以看到工作示例here。

希望这会有所帮助。

来源

2017-06-15 16:33:20

HI图表现在已经包含数据，但它在下一个周期中未更新。 –

请确保每5秒钟有不同的数据，因为每5秒钟请求事件触发到成功页面。 –

@ sunil4ur_s1我已经更新了我的答案。让我知道这是否运作良好。 –

高图柱形图动态更新ajax

回答

相关问题