如何在我的 html 上使用 getJSON答案

【问题标题】：How to use getJSON on my html如何在我的 html 上使用 getJSON
【发布时间】：2015-04-16 21:45:48
【问题描述】：

我完全是 html、php、javascrpt 的菜鸟......但我有足够的编程技能，事实上我有以下代码在谷歌图表中捕获并被我稍微修改：

<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]
        ]
}

【问题讨论】：

你就那样做吧，你成功了！当然，问题可能是您尝试在回调之外使用studentId，而那您不能这样做，因为它是异步的。
您的数据是否已被条形码化为 JSON 文件？或者是从您的数据库中提取数据并且您正在从正在检索的数据中创建 JSON？一旦我知道这一点，我可以提供帮助。
那个文件在哪里？像您展示的代码一样提供服务（例如通过 http）？
首先，我当然不使用 studentId，哈哈，我不知道该函数在代码中的位置。第二，数据在JSON文件中，看最后的编辑标签，第三，文件与.php代码在同一路径，/var/www/html/graph.php和/var/www/html /datos.json 真正的事情是我有一些时间数据，我想添加到我的数组中，我的意思是，json 可以更改为另一个文件，只包含这样的数据：['22/03/ 2015', 1, 2, 3, 4] ['23/03/2015', 10, 20, 250, 750] 行到行，我只需要读取每一行并添加到我的数据数组中

标签： javascript php jquery arrays json

【解决方案1】：

我正在使用$.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。

【讨论】：

【解决方案2】：

如果您的文件是真实文件，并且您使用的是 PHP，并且只需要在服务器端执行此操作，则只需包含它即可。

<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 = <?php include 'myJson.json'; ?>;

    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>

更新：把代码放在原题的代码里

【讨论】：

那么，我可以在函数drawChart上使用json？？谢谢！
我需要把代码放在哪里？？在javascript脚本之前？？？对不起我的问题，但我对这种编程很傻。谢谢！
对不起，我偷懒了。我已经更新了我的答案以适合您的原始代码。请记住，这是通过 PHP 在服务器端发生的，并且该文件（myJson.json 或您所称的任何名称）需要存在。