javascript - 无法在 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>
推荐阅读
- python - 如何检查矩形是否不在pygame屏幕上
- r - 翻转字符串的两侧
- excel - VBA Userform 在直接运行时有效,但在通过 sub 运行时无效
- amazon-web-services - 在 Golang 中模拟 AWS 开发工具包?
- javascript - 无法得到响应。状态反应
- excel - 如何使用 2 张纸和多个条件使用 For Next 循环返回单元格值 - VBA
- .net - 针对自定义站点的在线购物插件的建议
- docker - l2 cni插件与l3插件有什么区别?
- wpf - 禁用时更改 RadioButton 文本的不透明度
- apache-kafka-streams - Kafka Streams DSL 谓词流分离