<html>
<head>
<style>html{font-family:Verdana;}</style>
<script type="text/javascript">
var canvas ;
var context ;
var Val_max;
var Val_min;
var sections;
var xScale;
var yScale;
// Values for the Data Plot, they can also be obtained from a external file
var Apple = [100, 102, 87, , 100, 123, 100, 90, 87, 91, 93, 88];
var Samsung = [30, 50, 70, 80, 90, 100, 95, 91, 85, 92, 99, 130];
var Nokia = [20, -10, -20, -25, -40, 5, 10, 28, 30, 43, 65, 80];
function init() {
// set these values for your data
sections = 12;
Val_max = 130;
Val_min = -40;
var stepSize = 10;
var columnSize = 50;
var rowSize = 50;
var margin = 10;
var xAxis = [" ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
//
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = "#0099ff"
context.font = "20 pt Verdana"
yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
xScale = (canvas.width - rowSize) / sections;
context.strokeStyle="#009933"; // color of grid lines
context.beginPath();
// print Parameters on X axis, and grid lines on the graph
for (i=1;i<=sections;i++) {
var x = i * xScale;
context.fillText(xAxis[i], x,columnSize - margin);
context.moveTo(x, columnSize);
context.lineTo(x, canvas.height - margin);
}
// print row header and draw horizontal grid lines
var count = 0;
for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
var y = columnSize + (yScale * count * stepSize);
context.fillText(scale, margin,y + margin);
context.moveTo(rowSize,y)
context.lineTo(canvas.width,y)
count++;
}
context.stroke();
context.translate(rowSize,canvas.height + Val_min * yScale);
context.scale(1,-1 * yScale);
// Color of each dataplot items
context.strokeStyle="#FF0066";
plotData(Apple);
context.strokeStyle="#9933FF";
plotData(Samsung);
context.strokeStyle="#000";
plotData(Nokia);
}
function plotData(dataSet) {
context.beginPath();
context.moveTo(0, dataSet[0]);
for (i=1;i<sections;i++) {
context.lineTo(i * xScale, dataSet[i]);
}
context.stroke();
}
</script>
</head>
<body onLoad="init()">
<div align="center">
<h2>Monthly Profits of Companies(in million $)</h2>
<canvas id="canvas" height="400" width="650">
</canvas>
<br>
<!--Legends for Dataplot -->
<span style="color:#FF0066"> Apple </span>
<span style="color:#9933FF"> Samsung</span>
<span style="color:#000"> Nokia </span>
</div>
</body>
</html>你好， 我需要绘制一个简单的线性图。 我不允许使用任何库、框架和 API。我试过这个。 但我需要用来自外部 json 文件的数据绘制图表。 如何从外部文件中获取数据？谁能帮我做到这一点。提前致谢。
最佳答案
希望对你有帮助
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'https://api.myjson.com/bins/1igag', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
var Apple = [];
var Samsung = [];
var Nokia = [];
function loadJSON(callback) {
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'https://api.myjson.com/bins/1igag', true);
xobj.onreadystatechange = function() {
if (xobj.readyState == 4 && xobj.status == "200") {
callback(xobj.responseText);
}
}
xobj.send(null);
}
loadJSON(function(response) {
var response;
var field=JSON.parse(response);
for (var i = 0; i < field.length; i++) {
Apple.push(field[i].xxx);
Samsung.push((field[i].xxx)+10);
Nokia.push((field[i].xxx)-30);
}
sections = 12;
Val_max = 130;
Val_min = -40;
var stepSize = 10;
var columnSize = 50;
var rowSize = 50;
var margin = 10;
var xAxis = [" ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
//
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
context.fillStyle = "#0099ff"
context.font = "20 pt Verdana"
yScale = (canvas.height - columnSize - margin) / (Val_max - Val_min);
xScale = (canvas.width - rowSize) / sections;
context.strokeStyle="#009933"; // color of grid lines
context.beginPath();
// print Parameters on X axis, and grid lines on the graph
for (i=1;i<=sections;i++) {
var x = i * xScale;
context.fillText(xAxis[i], x,columnSize - margin);
context.moveTo(x, columnSize);
context.lineTo(x, canvas.height - margin);
}
// print row header and draw horizontal grid lines
var count = 0;
for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
var y = columnSize + (yScale * count * stepSize);
context.fillText(scale, margin,y + margin);
context.moveTo(rowSize,y)
context.lineTo(canvas.width,y)
count++;
}
context.stroke();
context.translate(rowSize,canvas.height + Val_min * yScale);
context.scale(1,-1 * yScale);
// Color of each dataplot items
context.strokeStyle="#FF0066";
plotData(Apple);
context.strokeStyle="#9933FF";
plotData(Samsung);
context.strokeStyle="#000";
plotData(Nokia);
function plotData(dataSet) {
context.beginPath();
context.moveTo(0, dataSet[0]);
for (i=1;i<sections;i++) {
context.lineTo(i * xScale, dataSet[i]);
}
context.stroke();
}
});<body>
<div align="center">
<h2>Monthly Profits of Companies(in million $)</h2>
<canvas id="canvas" height="400" width="650">
</canvas>
<br>
<!--Legends for Dataplot -->
<span style="color:#FF0066"> Apple </span>
<span style="color:#9933FF"> Samsung</span>
<span style="color:#000"> Nokia </span>
</div>
</body>关于javascript - 如何从外部文件中获取数据以在 Canvas 中绘制图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45588476/