1
<html>
<head>
<title>JS Charts</title>
</head>
<script type="text/javascript">
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;
\t Val_max = 130;
\t Val_min = -40;
\t var stepSize = 10;
\t var columnSize = 50;
\t var rowSize = 50;
\t var margin = 10;
\t var xAxis = [" ", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
\t canvas = document.getElementById("canvas");
\t context = canvas.getContext("2d");
\t context.fillStyle = "#0099ff"
\t context.font = "20 pt Verdana"
\t yScale = (canvas.height - columnSize - margin)/(Val_max - Val_min);
\t xScale = (canvas.width - rowSize)/sections;
\t context.strokeStyle="#009933"; // color of grid lines
\t context.beginPath();
// print Parameters on X axis, and grid lines on the graph
\t for (i=1;i<=sections;i++) {
\t \t var x = i * xScale;
\t \t context.fillText(xAxis[i], x,columnSize - margin);
\t \t context.moveTo(x, columnSize);
\t \t context.lineTo(x, canvas.height - margin);
\t }
// print row header and draw horizontal grid lines
\t var count = 0;
\t for (scale=Val_max;scale>=Val_min;scale = scale - stepSize) {
\t \t var y = columnSize + (yScale * count * stepSize);
\t \t context.fillText(scale, margin,y + margin);
\t \t context.moveTo(rowSize,y)
\t \t context.lineTo(canvas.width,y)
\t \t count++;
\t }
\t context.stroke();
\t context.translate(rowSize,canvas.height + Val_min * yScale);
\t context.scale(1,-1 * yScale);
\t \t // Color of each dataplot items
\t context.strokeStyle="#FF0066";
\t plotData(Apple);
\t context.strokeStyle="#9933FF";
\t plotData(Samsung);
context.strokeStyle="#000";
\t plotData(Nokia);
function plotData(dataSet) {
\t context.beginPath();
\t context.moveTo(0, dataSet[0]);
\t for (i=1;i<sections;i++) {
\t \t context.lineTo(i * xScale, dataSet[i]);
\t }
\t context.stroke();
}
});
</script>
<body>
<div align="center">
<h2>Monthly Profits of Companies(in million $)</h2>
<canvas id="canvas" height="400" width="650">
</canvas>
<br>
\t <!--Legends for Dataplot -->
<span style="color:#FF0066"> Apple </span>
<span style="color:#9933FF"> Samsung</span>
<span style="color:#000"> Nokia </span>
</div>
</body>
</html>嗨。我需要繪製一個線性圖。這裏我拿了樣品。現在我需要從json文件中獲取x和y的數據。我如何做到這一點。我不允許使用任何庫或API，只允許使用HTML，CSS和Javascript。任何人都可以告訴我。我的JSON數據看起來像
[{"aa":{
"total_visits":"925",
"2017-07-29":{
"visits":38,
"leads":0
},
"total_leads":13
},
"bb":{
"total_visits":"144",
"2017-07-29":{
"visits":1,
"leads":0
},
"total_leads":1
},
"cc":{
"last_recorded":"2017-07-29",
"total_visits":"1386",
"2017-07-29":{
"visits":41,
"leads":0
},
"total_leads":12
},
"dd":{
"total_visits":"2364",
"2017-07-29":{
"visits":55,
"leads":2.1
},
"total_leads":59
},
"ee":{
"2017-07-29":{
"visits":44,
"leads":0
},
"total_leads":37
},
"ff":{
"total_leads":2
},
"gg":{
"total_leads":1
},
"hh":{
"total_visits":"115",
"2017-07-29":{
"visits":2,
"leads":0
},
"package_id":"2",
"total_leads":3
},
"ii":{
"total_visits":"2213",
"2017-07-29":{
"visits":94,
"leads":0
},
"total_leads":87
}
}]
我需要採取total_visits（或）瀏覽次數（X軸）和total_leads（或）導線（Y軸）和繪製圖形。提前致謝。
我認爲你可以使用http://underscorejs.org/庫來實現這一目標。 –