javascript - 调用预制图表的 URL：我如何设法实现图表的数据？

问题描述

我目前正在攻读 IT 硕士学位，我遇到了相当大的难题。根据我最近的任务，我本周的主题是“创建一个网页，根据从 URL 传递给它的数据显示条形图：https ://home.ubalt.edu/gwalsh/idia619/data.php

该图表应有五个条形图，并在每个条形图下方放置一个文本标签。当您点击刷新时，它应该会更新。

使用本周的课程作为绘图和文本放置的基础。API 获取与以前相同，但您将调用 URL，而不是本地文件。使用前面的代码，您将获得一个数组元素，并且您将能够使用arr[0].labelwhere arris Array 和labelis 返回的元素来访问这些值。（提示：自行加载 url 以查看标签）。”

所以，让我感到困惑的是：我应该如何去做呢？我已经制作了图表，如我的代码所示（我建议在 Microsoft Edge 中打开它）。我不专注于让它看起来漂亮，我的导师也不是，我唯一的问题是我缺少什么来完成这项任务的目的，让它真正发挥作用。

过去我尝试过PHP的数组，我尝试过Ajax，我也尝试过JSON，都没有奏效。

（PHP 的具体值列在实际代码的上方；为方便起见，如果我不知道如何使其工作。）

    var arr = ["41","28","10","36","32"]

    var c=document.getElementById("myCanvas")
    var ctx=c.getContext("2d");

    var x = 20
    var y = 200
    var width = 50
    var height = 100

    ctx.fillStyle = "#FF0000"
    ctx.fillRect(x,y-arr[0]*10,width,arr[0]*10) 

    ctx.font = "15px Arial"
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[0], x+10, y+20)


    ctx.fillStyle = "#000000"
    ctx.fillRect(75,y-arr[1]*10,width,arr[1]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[1], 75+10, y+20)


    ctx.fillStyle = "#0000FF"
    ctx.fillRect(130,y-arr[2]*10,width,arr[2]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[2], 130+10, y+20)

    ctx.fillStyle = "#FFA500"
    ctx.fillRect(185,y-arr[3]*10,width,arr[3]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[3], 185+10, y+20)

    ctx.fillStyle = "#006400"
    ctx.fillRect(240,y-arr[4]*10,width,arr[4]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[4], 240+10, y+20)

    cxt.stroke()

据我所知，期望/预期的结果是从给定的 url 调用数据，并让图表显示来自所述调用的数据。

编辑：@Cat 建议了一个 XMLHttpRequest，它实际上有点工作！我相信现在，我的问题是如何让调用的数据实际显示在我创建的图表上。我的更新代码（我从 W3Schools 大量借用）如下：

<head>
<script>
    window.onload = function loadXMLDoc() {
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        // code for older browsers
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("myCanvas").innerHTML =
          this.responseText;
        }
      };
      xmlhttp.open("GET", "https://home.ubalt.edu/gwalsh/idia619/data.php", true);
      xmlhttp.send(canvasLoad);

    }

        function canvasLoad() {

        var arr = ["","","","",""]

        var c=document.getElementById("myCanvas")
        var ctx=c.getContext("2d");

        var x = 20
        var y = 200
        var width = 50
        var height = 100

        ctx.fillStyle = "#FF0000"
        ctx.fillRect(x,y-arr[0]*10,width,arr[0]*10) 

        ctx.font = "15px Arial"
        ctx.fillStyle = "#000000"
        ctx.fillText(arr[0], x+10, y+20)


        ctx.fillStyle = "#000000"
        ctx.fillRect(75,y-arr[1]*10,width,arr[1]*10) 
        ctx.fillStyle = "#000000"
        ctx.fillText(arr[1], 75+10, y+20)


        ctx.fillStyle = "#0000FF"
        ctx.fillRect(130,y-arr[2]*10,width,arr[2]*10) 
        ctx.fillStyle = "#000000"
        ctx.fillText(arr[2], 130+10, y+20)

        ctx.fillStyle = "#FFA500"
        ctx.fillRect(185,y-arr[3]*10,width,arr[3]*10) 
        ctx.fillStyle = "#000000"
        ctx.fillText(arr[3], 185+10, y+20)

        ctx.fillStyle = "#006400"
        ctx.fillRect(240,y-arr[4]*10,width,arr[4]*10) 
        ctx.fillStyle = "#000000"
        ctx.fillText(arr[4], 240+10, y+20)

        cxt.stroke()

        console.log(canvasLoad);
    }

    </script>

    </head>

    <body>

    <canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;"></canvas>


    <script>

    </script>
    </body>

编辑 2：@Cat 再次对他们的建议提供了亲切的帮助，因此，希望最后一次，我将发布更新的上下文代码，希望现在图表看起来像一个图表。

<script>
window.onload = function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else {
    // code for older browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("myCanvas").innerHTML =
      this.responseText;
    }
  };
  xmlhttp.open("GET", "https://home.ubalt.edu/gwalsh/idia619/data.php", true);
  xmlhttp.send(canvasLoad);

    const dataString = '[{ "title":"Random Information", "item01":"43", "item02":"36", "item03":"31", "item04":"16", "item05":"36" }]';
Object.entries(JSON.parse(dataString)[0]).forEach( arr => { console.log(arr); });

}

    function canvasLoad() {

    var arr = ["","","","",""]

    var c=document.getElementById("myCanvas")
    var ctx=c.getContext("2d");

    var x = 20
    var y = 200
    var width = 50
    var height = 100

    ctx.fillStyle = "#FF0000"
    ctx.fillRect(x,y-arr[0]*10,width,arr[0]*10) 

    ctx.font = "15px Arial"
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[0], x+10, y+20)


    ctx.fillStyle = "#000000"
    ctx.fillRect(75,y-arr[1]*10,width,arr[1]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[1], 75+10, y+20)


    ctx.fillStyle = "#0000FF"
    ctx.fillRect(130,y-arr[2]*10,width,arr[2]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[2], 130+10, y+20)

    ctx.fillStyle = "#FFA500"
    ctx.fillRect(185,y-arr[3]*10,width,arr[3]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[3], 185+10, y+20)

    ctx.fillStyle = "#006400"
    ctx.fillRect(240,y-arr[4]*10,width,arr[4]*10) 
    ctx.fillStyle = "#000000"
    ctx.fillText(arr[4], 240+10, y+20)

    cxt.stroke()

    console.log(canvasLoad);
}

</script>

</head>

<body>

<canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;"></canvas>


<script>

</script>
</body>

标签： javascripthtmlurlbar-chart

javascript - 调用预制图表的 URL：我如何设法实现图表的数据？

问题描述

解决方案

推荐阅读