如何在javascript中的json文件中读取数据以将其用于Google图表？
[英]How to read data in json file in javascript to use it for google charts?
问题描述
我在static / 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使用烧瓶框架运行everyting
我没有这个主题的经验。 有谁能够帮助我？
3 个解决方案
解决方案1
1 2015-04-25 11:49:19
UberKaeL是正确的。
更新：更正了代码和数据的多个问题，例如，数据中的结尾逗号。 现在可以使用...单击“运行代码片段”按钮。
问题是“ mydata”。 您正在尝试在加载json文件之前使用数据。 这触发了错误。 而且mydata不会用于任何东西。 您还需要添加DIV来保存饼图。 下面的代码段有效，但是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>
解决方案2
1 2015-04-25 12:06:17
一段时间后，您的页面似乎在加载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给您有关如何绘制图表的好答案
解决方案3
0 2015-04-25 11:12:59
您没有在放置json读取值的位置使用mydata 。
数据包含一个空的new google.visualization.DataTable() ，并且循环正在从中读取值，而不是从mydata中读取值。
如何从JSON文件读取数据并将其传递给Google图表行（javascript）
[英]how to read data from an JSON file and pass it to google chart rows (javascript)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.