Javascript 获取表的第二列的值,然后将其绘制为图形

Javascript 获取表的第二列的值,然后将其绘制为图形,javascript,html,graph,Javascript,Html,Graph,我试图从API中获取的值创建一个图形。基本上到目前为止,我所做的是创建一个包含所有值的表,如下所示: function myFunction() { var symbol = document.getElementById("Ticker").value; //var symbol = "TSLA"; // https://financialmodelingprep.com/developer/docs getRequest(

我试图从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>
看起来像 我想做的是得到第二列,这样收入和图表的价值与以下内容:

<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
                }
            }]


        }

    }
});

基本上,将收入插入到数据值中,当前的数据值是2,1,3,5,2,3。如果您能提供任何帮助,我将不胜感激。

我可以帮您取回第二行,但不能用图形表示。 要使其正常工作,您的表需要在html中,并且您需要向表中添加一个id,如下所示:

$table.id = "chartTable";
把它放在let$table=createElement或其他任何东西后面。 然后:

编辑: 对于列:

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);
}

嗨,谢谢你回答我的问题,我不小心说了行而不是列。好吧。编辑。顺便说一句,$表必须仍然有一个ID。再次感谢您的回答,但现在我得到了错误TypeError:row在尝试运行它时未定义。row还是rows?而且,它们都是定义好的,所以不应该引起任何问题。你确定桌子上有id吗?
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);
}
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);
}