无法在 JavaScript 中显示图表
Unable to display graph in JavaScript
我正在调用基于 REST 的 API,并且我正在 JavaScript 中正确获取数据。在下面的代码中,变量 dataPoints
被正确设置。从 Web 服务获取数据并更新结构的代码工作正常。在此之后,我需要在图表中显示数据。
但是绘制图表时,数据并没有出现。
window.onload = function() {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "Total cases"
},
axisY: {
title: "Units",
titleFontSize: 24
},
data: [{
type: "column",
yValueFormatString: "#,### Units",
dataPoints: dataPoints
}]
});
fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
"method": "GET",
"headers": {
"x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
"x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
}
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: data[i].date,
y: data[i].totalconfirmed
})
}
chart.render();
});
}
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
Canvas Js 接受日期或数字作为 x 和 y 坐标。我们从 api 得到的输出是字符串。date: "30 January ",totalconfirmed: "1"
所以我们需要将它们转换成日期和数字来绘制图形。
dataPoints.push({
x: new Date(data[i].date + new Date().getFullYear()), // converting into date
y: parseInt(data[i].totalconfirmed) // converting into number
})
window.onload = function() {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "Total cases"
},
axisY: {
title: "Units",
titleFontSize: 24
},
data: [{
type: "column",
yValueFormatString: "#,### Units",
dataPoints: dataPoints
}]
});
fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
"method": "GET",
"headers": {
"x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
"x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
}
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: new Date(data[i].date + new Date().getFullYear()),
y: parseInt(data[i].totalconfirmed)
})
}
chart.render();
});
}
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
我正在调用基于 REST 的 API,并且我正在 JavaScript 中正确获取数据。在下面的代码中,变量 dataPoints
被正确设置。从 Web 服务获取数据并更新结构的代码工作正常。在此之后,我需要在图表中显示数据。
但是绘制图表时,数据并没有出现。
window.onload = function() {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "Total cases"
},
axisY: {
title: "Units",
titleFontSize: 24
},
data: [{
type: "column",
yValueFormatString: "#,### Units",
dataPoints: dataPoints
}]
});
fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
"method": "GET",
"headers": {
"x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
"x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
}
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: data[i].date,
y: data[i].totalconfirmed
})
}
chart.render();
});
}
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
Canvas Js 接受日期或数字作为 x 和 y 坐标。我们从 api 得到的输出是字符串。date: "30 January ",totalconfirmed: "1"
所以我们需要将它们转换成日期和数字来绘制图形。
dataPoints.push({
x: new Date(data[i].date + new Date().getFullYear()), // converting into date
y: parseInt(data[i].totalconfirmed) // converting into number
})
window.onload = function() {
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "Total cases"
},
axisY: {
title: "Units",
titleFontSize: 24
},
data: [{
type: "column",
yValueFormatString: "#,### Units",
dataPoints: dataPoints
}]
});
fetch("https://corona-virus-world-and-india-data.p.rapidapi.com/api_india_timeline", {
"method": "GET",
"headers": {
"x-rapidapi-host": "corona-virus-world-and-india-data.p.rapidapi.com",
"x-rapidapi-key": "3852d9455emsh4570e6927cf850ep19a75bjsnac73b191c6f4"
}
})
.then(function(response) {
return response.json();
})
.then(function(data) {
for (var i = 0; i < data.length; i++) {
dataPoints.push({
x: new Date(data[i].date + new Date().getFullYear()),
y: parseInt(data[i].totalconfirmed)
})
}
chart.render();
});
}
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>