gpt4 book ai didi

javascript - 如何在我的 html 上使用 getJSON

转载 作者:行者123 更新时间:2023-11-30 00:30:38 25 4
gpt4 key购买 nike

我完全是 html、php、javascrpt 的菜鸟……但我有足够的编程技能,事实是我在 google 图表中捕获了以下代码并由我稍作修改:

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

var datos = [
['DATOS', 'dato1', 'dato2', 'dato3', 'dato4'],
['22/03/2015', 1000, 400, 300, 1000],
['23/03/2015', 1170, 460, 250, 750],
['24/03/2015', 660, 220, 200, 730],
['25/03/2015', 200, 140, 100, 699]
];

var datos_end = google.visualization.arrayToDataTable(datos);

var options = {
chart: {
title: 'Datos de los sensores',
}
};

var chart = new google.charts.Bar(document.getElementById('columncrt_material'));

chart.draw(datos_end, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

问题是:我怎样才能从 .json 文件中获取数据而不是手动写入。数据在json文件中已经是一个字符串。

我一直看到有一些函数可以用 JQuery 读取 json,但我不知道如何插入我的代码:

var studentId = null;
j.getJSON(url, data, function(result)
{
studentId = result.Something;
});

链接:https://stackoverflow.com/questions/3...tjson-function

编辑

我的 json 是:

{
"data":[
['DATA', 'd1', 'd2', 'd3', 'd4'],
['22/03/2015', 1000, 400, 300, 1000],
['23/03/2015', 1170, 460, 250, 750],
['24/03/2015', 660, 220, 200, 730],
['25/03/2015', 200, 140, 100, 2000]
]
}

最佳答案

我正在使用 $.getJSON 解析 json 文件并将数组分配给 datos_end。

首先将 json 添加到文件中。我添加为 graph.json 并将其存储在一个地方。 Json 必须采用正确的格式。以上json内容不要复制粘贴。使用以下 json(格式化)。

{"data":[["Year","Sales","Expenses","Profit"],["2014",1000,400,200],["2015",1170,460,250],["2016",660,1120,300],["2017",1030,540,350]]}

然后你需要添加 jQuery library到你的页面就像google graph api文件然后做了一些修改。检查下面的代码。

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!-- Included Jquery Library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
$.getJSON("graph.json", function(response){
var datos_end = google.visualization.arrayToDataTable(response.data);

var options = {
chart: {
title: 'Datos de los sensores',
}
};

var chart = new google.charts.Bar(document.getElementById('columncrt_material'));

chart.draw(datos_end, options);
})
.success(function() {
console.log("success");
})
.error(function(jqXHR, textStatus, errorThrown) {
console.log("error " + textStatus);
console.log("incoming Text " + jqXHR.responseText);})
.complete(function() {
console.log("completed");
});
}
</script>
</head>
<body>
<div id="columncrt_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

有关 $.getJson 的更多详细信息,请查看 official documentation .

关于javascript - 如何在我的 html 上使用 getJSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29686542/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com