Вызов URL-адреса для готовой диаграммы: как мне реализовать данные для диаграммы? - PullRequest
Новая
       5

Вызов URL-адреса для готовой диаграммы: как мне реализовать данные для диаграммы?

0 голосов
/ 31 марта 2019

В настоящее время я учусь в магистратуре по ИТ, и мне кажется, что я сталкиваюсь с довольно загадкой.Согласно моему последнему заданию, моя тема на неделю - «Создать веб-страницу, которая отображает гистограмму на основе данных, переданных ей с URL-адреса: https://home.ubalt.edu/gwalsh/idia619/data.php

Диаграмма должна иметь пять столбцов и помещатьтекстовая метка под каждым. Когда вы нажмете «Обновить», он должен обновиться.

Используйте уроки этой недели в качестве основы для рисования и размещения текста. Получение API такое же, как и раньше, но вместо локального файлавы будете вызывать URL. Используя предыдущий код, вы получите один элемент массива и получите доступ к значениям с помощью arr [0] .label, где «arr» - это массив и «метка».«Возвращен ли элемент. (Подсказка: загрузите 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>

1 Ответ

1 голос
/ 31 марта 2019

Получив данные через XMLHttpRequest, вам, вероятно, потребуется изменить их с строки на объект javascript с JSON.parse.Если напечатанная строка выглядит как dataString ниже, вы можете извлечь значения с помощью Object.entries, например: 

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