javascript - 获取表第二列的值，然后用 JavaScript 绘制图表

Question

我正在尝试根据从 https://financialmodelingprep.com/ 获得的值创建一个图表API。基本上我到目前为止所做的是创建一个包含所有值的表，如下所示:

function myFunction() { 
      var symbol =  
              document.getElementById("Ticker").value; 


//var symbol = "TSLA";





  // https://financialmodelingprep.com/developer/docs
  getRequest(
    'https://financialmodelingprep.com/api/v3/financials/income-statement/' + symbol + '?period=quarter',
    drawOutput
  );

  function drawOutput(responseText) {
    let resp = JSON.parse(responseText).financials;
    let financials = resp;
    let $table = document.createElement("table");
    $table.className += " table2";

    var elements = document.querySelectorAll('.stock-name')[0];

    let $head = document.createElement("thead");
    let $body = document.createElement("tbody");

    let $lineHader = document.createElement("tr");

 /*    let $elefirst = document.createElement("th");
    $elefirst.textContent = 'Fiscal';
    $lineHader.appendChild($elefirst); */

    for (let i = 0; i < financials.length; i++) {
      let financial = financials[i];
      let $line = document.createElement("tr");


      for (var key in financial) {
        if (i === 0 && financial.hasOwnProperty(key)) {
          let $ele = document.createElement("th");
          $ele.textContent = key;
          $lineHader.appendChild($ele);
        }
      }

      $head.appendChild($lineHader);
      $table.appendChild($head);
      var z = 0;
      for (var key2 in financial) {
        if (financial.hasOwnProperty(key2)) {
       /*    if (z === 0) {
            let title = Object.keys(resp)[i];
            let $eleTile = document.createElement("td");
            $eleTile.textContent = title;
            $line.appendChild($eleTile);
          } */
          let $eletd = document.createElement("td");
          if (z === 0) {
            $eletd.textContent = financial[key2];
          } else {
            $eletd.textContent = financial[key2];
          }
          $line.appendChild($eletd);
        }
        z++;
      }
      $body.appendChild($line)

      $table.appendChild($body);

    }

    document.body.appendChild($table);
  }

  function getRequest(url, success) {
    var req = false;
    try {
      req = new XMLHttpRequest();
    } catch (e) {
      try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
        try {
          req = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
          return false;
        }
      }
    }
    if (!req) return false;
    if (typeof success != 'function') success = function() {};
    req.onreadystatechange = function() {
      if (req.readyState == 4) {
        if (req.status === 200) {
          success(req.responseText)
        }
      }
    }
    req.open("GET", url, true);
    req.send(null);
    return req;
  }

}
</script>
<div class="stock-name"></div>

看起来像 This我想要做的是获取第二列的收入并用图表绘制这些值:

<canvas id="myChart" width="400" height="200"></canvas>
<script>
var ctx = document.getElementById('myChart');


var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [2, 1, 3, 5, 2, 3],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            fill: false,
            showLine: true,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]


        }

    }
});

基本上将 Revenue 插入当前的数据值 2, 1, 3, 5, 2, 3 。如果有任何可能的帮助，我将不胜感激。

Answer 1

我可以帮助您获取第二行，但不能将其绘制成图表。
为此，您的表格需要位于 html 中，并且您需要向表格添加一个 id，如下所示:

$table.id = "chartTable";

将其放在 let $table = createElement() 或其他内容之后。然后:

let secondRow = document.querySelectorAll('#' + $table.id + ' tr')[1].;

编辑:对于列:

let rows = document.querySelectorAll('#' + $table.id + ' tr'), i, col = [];
for (i = 0; i < rows.length; i++) {
  let row = rows[i][1];
  col.push(row.innerText);
}

然后 col 数组将包含所有值。

说明(对于列位):
要访问第二列，您需要访问每行的第二个值。

第二次编辑:

let tds = document.querySelectorAll('#' + $table.id + ' tr td'), i, col = [];
let l = 20; // l is the number of elements in a **row**
for (i = 1; i < tds.length; i += l) {
  col.push(tds[i].innerHTML);
}