我有一个 .json 文件 (abc.json)，我想使用 jqplot 从该数据的两列中绘制图表。我的做法是:
- 使用 jquery 将 json 文件数据转换为数组
- 使用 jqplot 从该数组中绘制图表
- 然后使用 html 在浏览器上显示该图
- 但是我不能这样做，因为我对 javascript 不是很精通。
我的 JSON 数据如下所示:
[
{
"id":1,
"essid":"\"WiredSSID\"",
"mac":"08:00:27:b1:3e:4d",
"ip":"10.0.3.15",
"ss":-55,
"lon":-18.5333,
"lat":65.9667,
"alt":15.044444,
"acc":1,
"res":18058,
"pub_date":"2015-12-01 22:39:07.700953"
},
{
"id":2,
"essid":"\"WiredSSID\"",
"mac":"08:00:27:b1:3e:4d",
"ip":"10.0.3.15",
"ss":-55,
"lon":-18.5333,
"lat":65.9667,
"alt":15.044444,
"acc":1,
"res":16337,
"pub_date":"2015-12-01 23:13:52.639206"
},
但是我希望我的 javascript 直接从 JSON 文件读取数据并绘制 id 与 res 的图表。
下面是我为此目的编写的一个不完整的代码，它缺少一些主要过程。
谁能帮我完成这段代码，这样我就可以完成我的这个学术项目。这真的很有帮助。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script src="jqplot.canvasTextRenderer.min.js" type="text/javascript"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.jqplot.js" type="text/javascript"></script>
<script src="jqplot.dateAxisRenderer.js" type="text/javascript"></script>
<script src="jqplot.categoryAxisRenderer.js" type="text/javascript" ></script>
<script src="jqplot.ohlcRenderer.js" type="text/javascript"></script>
<script src="jqplot.highlighter.js" type="text/javascript"></script>
<script src="jqplot.cursor.js" type="text/javascript"></script>
<script src="jqplot.pointLabels.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// The url for our json data
var url = 'mc_measurementne_new1.json';
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType: "json",
success: function (data) {
ret = data;
}
});
var ID = [];
var Delay = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
ID.push([ret[i].Date, ret[i].id]);
Delay.push([ret[i].Date, ret[i].res]);
}
var plot1 = $.jqplot('chart1', [ID, Delay], {
title: "Delay",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%d/%m/%Y'
},
label: 'Date'
},
yaxis: {
label: 'Delay'
},
y2axis: {
label: 'ID'
}
},
series: [
{ yaxis: 'yaxis', label: 'ID' },
{ yaxis: 'y2axis', label: 'Delay' }
],
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
}
});
});
</script>
@{
ViewBag.Title = "jQPlot Demo";
}
<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.ohlcRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.cursor.js"></script>
</body>
</html>
最佳答案
这是一个工作示例。 https://jsfiddle.net/9jk0jyvt/1/
我注释掉了 ajax 请求并将其替换为您在上面提供的 json 响应。
需要注意的一件事是您的日期键不正确。我将其切换为 pub_date。
我还交换了您的轴标签以使其正确。
$(document).ready(function() {
// The url for our json data
var url = 'mc_measurementne_new1.json';
data = [{
"id": 1,
"essid": "\"WiredSSID\"",
"mac": "08:00:27:b1:3e:4d",
"ip": "10.0.3.15",
"ss": -55,
"lon": -18.5333,
"lat": 65.9667,
"alt": 15.044444,
"acc": 1,
"res": 18058,
"pub_date": "2015-12-01 22:39:07.700953"
}, {
"id": 2,
"essid": "\"WiredSSID\"",
"mac": "08:00:27:b1:3e:4d",
"ip": "10.0.3.15",
"ss": -55,
"lon": -18.5333,
"lat": 65.9667,
"alt": 15.044444,
"acc": 1,
"res": 16337,
"pub_date": "2015-12-01 23:13:52.639206"
}];
populateGraph(data);
/*
$.ajax({
url: url,
dataType: "json",
success: function (data) {
populateGraph(data);
}
});
*/
function populateGraph(ret) {
var ID = [];
var Delay = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
ID.push([ret[i].pub_date, ret[i].id]);
Delay.push([ret[i].pub_date, ret[i].res]);
}
var plot1 = $.jqplot('chart1', [ID, Delay], {
title: "Delay",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%d/%m/%Y'
},
label: 'Date'
},
yaxis: {
label: 'Delay'
},
y2axis: {
label: 'ID'
}
},
series: [{
yaxis: 'yaxis',
label: 'ID'
}, {
yaxis: 'y2axis',
label: 'Delay'
}],
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
}
});
};
});
关于javascript - 使用 Jquery 和 JqPlot 绘制带有数据的 JSON 文件中的图形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34236273/