Question

我是html，php，javascrpt上的一个完全noob ...但我有足够的编程技巧，事实是我在谷歌图表中捕获了以下代码，并由我稍加修改：

<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;
});

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

Answer 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。

Answer 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>

已更新：将代码放入原始问题的代码中

如何在我的html上使用getJSON

2 个答案: