Question

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

Answer 1

首先，您的代码中存在一些错误。

<body>标记内有<head>标记。
$.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等其他一些实用工具方法贵。

<强>参数


options：Boolean将合并到系列“现有选项”中的新选项。

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>

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

更新

如果您有一个包含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。

希望这有帮助。

使用ajax的高图表柱形图动态更新

1 个答案: