高圖柱形圖動態更新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

回答

相關問題