个人中心
gpt4 book ai didi

javascript - AmCharts dataLoader 不加载数据，但将数据粘贴到并使用 dataProvider 工作正常

转载 作者：行者123 更新时间：2023-12-02 14:10:40 26 4
gpt4 key购买 nike

我正在编写一个网页来显示使用 AmCharts 存储在 MySQL 数据库中的数据图表，但在从中加载数据时遇到问题。我将 AmCharts 图表制作器的“时间序列，秒”模板(包括使用 dataProvider 显示的提供数据)中的代码复制到我的页面中。正如预期的那样，这完全正常。

然后，我使用 AmCharts 网站上的 dataLoader 教程尝试从我的数据库加载数据。我通过删除 dataProvider 部分并在 "type": "serial", 行下添加以下内容来编辑当前的代码(如上所述从图表制作器复制) :

"dataLoader": {
    "url": "getdata.php"
},

最后，我更改了图表部分中的 categoryField 和两个 valueField 属性，以便它们与我的数据匹配。 getdata.php 文件与我要显示图表的页面位于同一目录中，并包含以下代码:

<?php
$host = "*";
$username = "*";
$password = "*";
$database = "*";

$connection = mysqli_connect($host, $username,
    $password, $database) or die("response[0]");

// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 22:30:00'";
$executeReport = mysqli_query($connection, $reportQuery);

$data = array();
while ( $row = $executeReport->fetch_assoc() ) {
  $data[] = $row;
}
echo json_encode( $data );
?>

但是，当加载图表页面时，我得到的只是一个带有标题、图例和 AmCharts 水印的空图表，没有显示任何数据。我知道 getdata.php 文件是正确的，因为我在浏览器中运行它并得到以下输出:

[{"reportid":"00000001","timestamp":"2016-09-20 18:53:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000002","timestamp":"2016-09-20 18:54:00","shieldedtemp":"16.25","exposedtemp":"16.31","soil10temp":"16.94","soil30temp":"15.56","soil100temp":"15.63"},{"reportid":"00000003","timestamp":"2016-09-20 18:55:00","shieldedtemp":"16.31","exposedtemp":"16.38","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000004","timestamp":"2016-09-20 18:56:00","shieldedtemp":"16.31","exposedtemp":"16.31","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000005","timestamp":"2016-09-20 18:57:00","shieldedtemp":"16.25","exposedtemp":"16.25","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000006","timestamp":"2016-09-20 18:58:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000007","timestamp":"2016-09-20 18:59:00","shieldedtemp":"16.25","exposedtemp":"16.19","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"},{"reportid":"00000008","timestamp":"2016-09-20 19:00:00","shieldedtemp":"16.19","exposedtemp":"16.13","soil10temp":"16.88","soil30temp":"15.50","soil100temp":"15.63"}]

此外，当我删除 dataLoader 属性并将上述 JSON 粘贴到 dataProvider 属性中时，一切正常并显示数据。

主图表页面的代码如下: ”; $用户名 = ""; $密码 = ""; $数据库 = "";

$connection = mysqli_connect($host, $username,
    $password, $database) or die("response[0]");

// Query the database to get latest weather report
$reportQuery = "SELECT * FROM stationdata WHERE timestamp BETWEEN '2016-09-20 18:00:00' AND '2016-09-20 19:00:00'";
//$executeReport = mysqli_query($connection, $reportQuery);

//$data = array();
//while ( $row = $executeReport->fetch_assoc() ) {
//  $data[] = $row;
//}
//echo json_encode( $data );

?>

<html>
  <head>
    <title>Remote Latest Data Warwick</title>

    <style>
      * {
        font-family: "Segoe UI", "-apple-system", "Helvetica Neue";
      }

      .headerContainer {
        width: 100%;
        height: 88;
        top: 0;
        position: fixed;
        background: black;
      }
      .headerRight {
        width: 560;
        height: 78;
        float: right;
      }

      .textMo {
        margin-top: 16;
        margin-left: 25;
        float: left;
        font-size: 38;
        color: white;
      }
      .textRld {
        margin-top: 8;
        margin-right: 15;
        float: right;
        font-size: 40;
        color: white;
      }
      .textLoc {
        margin-right: 70;
        float: right;
        font-size: 13;
        color: white;
      }
      .greenBar {
        width: 100%;
        height: 7;
        top: 78;
        position: fixed;
        background: #cbff31;
      }

      .footerContainer {
        width: 100%;
        height: 39;
        margin-bottom: 0 auto;
        bottom: 0;
        position: fixed;
        background: black;
      }
      .footerFieldContainer {
        max-width: 1216;
        height: 39;
        margin: 0 auto;
        padding-top: 2;
        padding-right: 10;
        padding-left: 10;
        position: center;
      }

      .footerFieldLabel {
        margin-top: 0;
        padding-top: 7;
        margin-right: 10;
        float: left;
        color: #cbff31;
        font-size: 15;
        box-sizing: border-box;
      }
      .footerFieldBorder {
        width: 91;
        height: 31;
        margin-top: 2;
        padding-top: 2;
        float: left;
        background: black;
        color: black;
        border: 2 solid #575757;
        border-radius: 5;
        box-sizing: border-box;
      }
      .footerFieldText {
        width: 100%;
        float: right;
        color: white;
        text-align: center;
        font-size: 19;
      }
    </style>

    <script>
      function onLoad() {
        startTime();
      }

      function checkTime(i) {
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
      function startTime() {
        var today = new Date();

        var dd = checkTime(today.getDate());
        var yyyy = today.getFullYear();

        var monthNames = ["Jan", "Feb", "Mar", "Apr", "May",
          "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var MM = monthNames[today.getMonth()];

        var hh = today.getHours();
        var mm = checkTime(today.getMinutes());
        var ss = checkTime(today.getSeconds());

        var formatted = dd + " of " + MM + " " + yyyy + " at " + hh + ":" + mm + ":" + ss;

        document.getElementById('currentTime').innerHTML = formatted;
        timer = setTimeout(function () { startTime() }, 500);
      }
    </script>

    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
    <script src="https://www.amcharts.com/lib/3/serial.js"></script>

    <script type="text/javascript">
            AmCharts.makeChart("temperatures",
                {
                    "type": "serial",
                    "dataLoader": {
                        "url": "getdata.php"
                    },
                    "categoryField": "timestamp",
                    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
                    "theme": "default",
                    "categoryAxis": {
                    "minPeriod": "ss",
                    "parseDates": true
                    },
                    "chartCursor": {
                        "enabled": true,
                        "categoryBalloonDateFormat": "JJ:NN:SS"
                    },
                    "chartScrollbar": {
                        "enabled": true
                    },
                    "trendLines": [],
                    "graphs": [
                    {
                        "bullet": "round",
                        "id": "AmGraph-1",
                        "title": "graph 1",
                        "valueField": "shieldedtemp"
                    },
                    {
                        "bullet": "square",
                        "id": "AmGraph-2",
                        "title": "graph 2",
                        "valueField": "exposedtemp"
                    }
                ],
                "guides": [],
                "valueAxes": [
                    {
                        "id": "ValueAxis-1",
                        "title": "Axis title"
                    }
                ],
                "allLabels": [],
                "balloon": {},
                "legend": {
                    "enabled": true,
                    "useGraphSettings": true
                },
                "titles": [
                    {
                        "id": "Title-1",
                        "size": 15,
                        "text": "Chart Title"
                    }
                ]
            }
        );
  </script>
  </head>

  <body onload="onLoad()" style="margin: 0">

    <!-- MAIN: Page header -->
    <div class="headerContainer">
      <p class="textMo">Weather Station</p>

      <div class="headerRight">
        <b class="textRld">Remote Latest Data Warwick</b>
        <i class="textLoc">Latitude: 52.279998, Longitude -1.561793</i>
      </div>

      <div class="greenBar"></div>
    </div>


    <!-- MAIN: Data fields -->
    <div class="mainContainer" style="background: red">

      <div class="actionBar">
         <a style="float: right" href>View Live Data</a>
      </div>

      <div id="temperatures" style="width: 100%; height: 400; background: #ffffff"></div>
    </div>


    <!-- MAIN: Page footer -->
    <div class="footerContainer">
      <div class="footerFieldContainer">

          <p class="footerFieldLabel">Current Time:</p>
          <div class="footerFieldBorder" style="width: 273">
            <b class="footerFieldText" id="currentTime">16 of Sep 2016 at 12:02:35</b>
          </div>

          <p class="footerFieldLabel" style="margin-left: 15">Time of Data:</p>
          <div class="footerFieldBorder" style="width: 70">
            <b class="footerFieldText">
              <?php
              $date = date("H:i", strtotime($reportArray[1]));
              echo $date;
               ?>
            </b>
          </div>


          <div style="float: right">
            <p class="footerFieldLabel">Approximate Number of Seconds to Update:</p>

            <div class="footerFieldBorder" style="width: 40">
              <b class="footerFieldText">59</b>
            </div>
          </div>

        </div>
    </div>

  </body>
</html>

图表和数据之间似乎存在某种断开的链接，但图表和数据本身很好。为什么它不工作以及如何让它工作？

最佳答案

AmCharts dataLoader 是一个外部插件，除了图表 JavaScript 文件之外，还需要加载额外的 JavaScript 文件。在 amcharts 和串行 js 包含之后添加以下内容:

<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>

关于javascript - AmCharts dataLoader 不加载数据，但将数据粘贴到并使用 dataProvider 工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39619909/

26 4 0
文章推荐： javascript - Controller 数据未传递给指令
文章推荐： javascript - Angular2 + ag-Grid 无法加载 ag-grid-ng2/main.js (404 Not Found)
文章推荐： javascript - 使用 PHP 排除特定的 html 标签及其中的内容
文章推荐： javascript - AngularJS Promise 循环错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com