Javascript 获取表的第二列的值,然后将其绘制为图形
我试图从API中获取的值创建一个图形。基本上到目前为止,我所做的是创建一个包含所有值的表,如下所示: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(
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);
}