文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >基于ajax的高图表列图动态更新

问基于ajax的高图表列图动态更新
EN

Stack Overflow用户
提问于 2017-06-15 14:48:54
回答 1查看 2.1K关注 0票数 0

Ajax返回的值将分配给高图表列，但根据我下面的代码，没有定义图表。首先，我尝试创建一个用户定义函数，并在ajax中调用该函数，但该函数没有进行适当的更新，然后我将optiion变量放入其中，并从此调用，甚至没有创建tho对象。

以下是代码：

代码语言：javascript
复制
<!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分钟更新一次。

代码语言：javascript
复制
 [
   {
     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]
  }
 ]
php
jquery
ajax
highcharts
javascript
EN

回答 1

Stack Overflow用户

发布于 2017-06-15 16:33:20

首先，代码中有一些错误。

  1. <body>标记在<head>标记中。
  2. $.ajax()期待一个json响应，但是json数据是不正确的。

有效的json数据：

代码语言：javascript
复制
[
    {
        "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()函数的助手请求函数。

示例：

代码语言：javascript
复制
function request() {
      return $.ajax({
        url: "https://gist.githubusercontent.com/dannyjhonston/0a573e0a882180d20df56357ac05345d/raw/541a5d3e17e686820c0476a630d490ff46fb47c2/successper.json",
        type: "GET",
        async: true,
        dataType: "json"
      });
}
  1. 调用$(function(){});块中的请求函数。通过在请求函数中使用.done()，您可以从URL中获取json数据。在done()函数中构建HighChart内容。

示例：

代码语言：javascript
复制
$(function() {
          request().done(function(point) {
            options.series = point;
            var chart = new Highcharts.Chart(options);
          });
});
  1. 在图表选项中的load对象中设置event函数。然后，对于当前的json数据响应，您可以使用update()级数方法。

Series.update()

更新(对象选项，布尔重绘)用一组新的选项更新系列。为了干净和精确地处理新的选项，本系列中的所有方法和元素都会被删除，并且从零开始。因此，与setData或setVisible等其他实用方法相比，该方法的性能成本更高。 参数

  • 选项:布尔新选项，将合并到系列的现有选项中。
  • 重绘:布尔值默认为true。是否在该系列更改后重新绘制图表。如果在图表上执行更多操作，最好将重绘设置为false，然后调用chart.redraw()。

示例：

代码语言：javascript
复制
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);
  }
}

就像这样：

​

代码语言：javascript
复制
<!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个元素的数组时，请更改：

代码语言：javascript
复制
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);
  }
}

对此：

代码语言：javascript
复制
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代码。

代码语言：javascript
复制
<?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();
?>

您可以看到工作示例这里。

希望这能有所帮助。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44570577

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档