堆棧內存溢出
  簡體   English   中英

高圖表柱形圖使用ajax動態更新

[英]high chart column chart dynamic update with ajax

 原文  2017-06-15 14:48:54  2   1    javascript/ php/ jquery/ ajax/ highcharts

問題描述

Ajax返回的值將分配給highchart列，但是根據我的以下代碼，未定義圖表。 首先，我嘗試創建用戶定義函數，並在ajax中調用該函數，但未提供適當的更新，然后我放置了optiion變量，並且即使未創建對象也無法從中調用

下面是代碼： 

<!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]
  }
 ]

1 個解決方案

解決方案1
 1  2017-06-15 16:33:20

首先，您的代碼中有一些錯誤。

  1. 您在<head>標記內具有<body> <head>標記。
  2. $.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]
    }
]

現在，關於問題：

我建議遵循以下步驟：

  1. 創建一個幫助程序請求函數，該函數返回$.ajax()函數。

例： 

function request() {
      return $.ajax({
        url: "https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json",
        type: "GET",
        async: true,
        dataType: "json"
      });
}
  1. 在$(function(){});調用請求函數$(function(){}); 塊。 通過在請求函數中使用.done() ，您可以從URL獲取json數據。 在done()函數中，構建HighChart內容。

例： 

$(function() {
          request().done(function(point) {
            options.series = point;
            var chart = new Highcharts.Chart(options);
          });
});
  1. 在圖表選項的event對象中設置load功能。 然后，使用當前的json數據響應，您可以使用update()系列方法。

Series.update（）

更新（對象選項，[布爾重繪]）使用一組新的選項更新系列。 為了干凈，准確地處理新選項，將刪除該系列中的所有方法和元素，並從頭開始。 因此，此方法比諸如setData或setVisible之類的其他一些實用工具的性能開銷更高。

參量

  • options：布爾值新選項，這些選項將合並到系列的現有選項中。
  • 重繪：布爾值默認為true。 更改系列后是否重畫圖表。 如果對圖表進行更多操作，則最好將redraw設置為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();
?>

您可以在此處查看工作示例。

希望這可以幫助。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動態高位圖表不顯示 帶柱形圖的Ajax動態數據 Highcharts多系列動態柱形圖更新 列高圖表的系列數據 動態Google柱形圖 動態高圖未在 MVC C# 中呈現 在高圖表列的推送執行中更改顏色 高圖表堆棧列日期時間問題 高圖表列圖形空間問題 HighChart：更新組柱形圖
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM