如何在 javascript 中读取 json 文件中的数据以将其用于谷歌图表？答案

【问题标题】：How to read data in json file in javascript to use it for google charts?如何在 javascript 中读取 json 文件中的数据以将其用于谷歌图表？
【发布时间】：2015-04-25 10:47:39
【问题描述】：

我在静态/data.json 路径中有数据。我正在尝试使用谷歌图表绘制图表。我想取出 data.json 文件中的数据并将其用于谷歌图表。

data.json 如下所示

data = '[{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v":0},]';

我的 html 代码在 template/isworked.html 中。

下面的代码是isworked.html

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="application/json" src="static/d.json"></script>
    
    <script type="text/javascript">
	
      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      
    
  
	var mydata = JSON.parse(data);

	function drawChart() {
	
        // Create the data table.
        
        
        //loading data from json
        var data = new google.visualization.DataTable();
       	data.addColumn('string', 'Feature');
        data.addColumn('number', 'Positive');
     	var f,n;
        for(var i = 0 ; i<data.length;i++){
        	f = data[i].k
        	n = data[i].v
        	data.addRows([[f,n]])
        }
        
        // Set chart options
        var options = {'title':'Pie Chart',
                       'width':800,
                       'height':700};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
       
   	  }
    </script>
  </head>

我无法绘制图表。此 data.json 是从 python 脚本生成的。我在 Ubuntu

中使用 flask 框架运行所有程序

我没有这方面的经验。有人可以帮帮我吗？

【问题讨论】：

我收到如下错误：Uncaught ReferenceError: data is not defined

标签： javascript jquery python json flask

【解决方案1】：

UberKaeL 是正确的。

更新： 更正了代码和数据的多个问题，例如数据中的尾随逗号。它现在可以工作了……点击“运行代码片段”按钮。

“mydata”是问题所在。您正在尝试在 json 文件加载之前使用数据。这会触发错误。而且 mydata 不用于任何事情。您还需要添加一个 DIV 来保存饼图。下面的代码 sn-p 可以工作，但是 json 数据对于绘制饼图不正确。更正数据，它应该适合您。

<!DOCTYPE HTML>
	<html>
	<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
	    var mydata = [{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v": 0}];
    </script>
    <script type="text/javascript">
		google.load('visualization', '1.0', {'packages':['corechart']});
		google.setOnLoadCallback(drawChart);
	
		function drawChart() {
	        var data = new google.visualization.DataTable();
	       	data.addColumn('string', 'Feature');
	        data.addColumn('number', 'Positive');
	     	var f,n;
	        for(var i = 0 ; i<mydata.length;i++){
	        	f = mydata[i].k
	        	n = mydata[i].v
	        	data.addRows([[f,n]])
	        }
	        var options = {'title':'Pie Chart', 'width':800, 'height':700};
	        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	        chart.draw(data, options);
		}
    </script>
	</head>
	<body>
		<div id="chart_div"></div>
	</body>
	</html>

【讨论】：

如果我在程序内部提供 json 数据，它可以工作，如果数据在外部 json 文件中，它就不能工作。
谢谢...但是对于外部 json 文件，它仍然无法正常工作
如果json数据在其他文件中如何正确使用，例如：我的json数据文件在：static/d.json文件中
你的json数据不正确。在您修复数据文件之前，它不会起作用。
OK...如果给出的数据像您的代码一样适用于我，，，，相同的数据保存在文件中，无法加载，...为什么？？..如何纠正我的json数据？

【解决方案2】：

一段时间后，您的页面似乎在加载 json 文件之前运行了代码。像这样读取json不是一个好习惯，最好做一个像jQuery.getJSON()这样的AJAX请求

所以如果您使用的是 jQuery，请执行以下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON</title>
</head>
<body>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script>

        var mydata=jQuery.getJSON("static/d.json");
            if(mydata) {
                alert("yay worked");
            }
            else {
                alert("something is wrong");
            }
            //rest of your code
            //function drawChart() { ...

    </script>

</body>
</html>

将您的程序包含在 $(document).ready 中也是一个很好的做法，并记得删除 JSON 中的最后一个逗号：

data = '[{"k": "RAM" , "v":0.515625},{"k": "Camera" , "v":0.515625},{"k": "Design" , "v":0.05},{"k": "Processor" , "v":0}]';

@Robert 给你一个关于如何绘制图表的好答案

【讨论】：

如果我在程序内部提供 json 数据，它可以工作，如果数据在外部 json 文件中，它就不能工作。
thk u，警报显示：偏航工作，，但饼图中没有数据...就像 balnk
数据现在在mydata中，你需要像其他@Robert告诉的那样重写你的程序

【解决方案3】：

您没有使用 mydata 放置 json 读取值的位置。

数据包含一个空的new google.visualization.DataTable()，并且循环正在从中读取值，而不是从mydata。

【讨论】：

我在行中遇到错误：var mydata = JSON.parse(data);
我现在应该在哪里更改？
确保<script type="application/json" src="static/data.json"></script> 正在负载检查if(data) {alert("yes")} 或使用onload/ready (jQuery) 方法。可能您的程序在加载数据之前启动。
Uncaught ReferenceError: data is not defined(anonymous function) @is_done:21
所以没有加载，尝试检查文件目录并等待所有内容加载完毕，记住$(document).ready(function(){ your_program });