来自json的谷歌图表数据不起作用

时间:2017-04-10 08:48:20

标签: jquery json google-visualization

我尝试使用谷歌图表从json获取数据以显示在我的页面上。 当我在我的js中硬编码数据时它被显示出来,但是为什么当我通过json调用externaly时它没有显示,它表示" table没有列"。 为什么会这样,任何建议如何让这个工作? 谢谢



$(document).ready(function(){
	google.charts.load('current', {'packages':['corechart']});
	google.charts.setOnLoadCallback(drawChart);

	function drawChart() {
//  var jsonData ={
// "cols":[
// 		{
// 			"label":"Unit", 
// 			"type":"string"
// 		},
// 		{
// 			"label":"Unit A", 
// 			"type":"number"
// 		},
// 		{
// 			"label":"Unit B", 
// 			"type":"number"
// 		},
// 		{
// 			"label":"Unit C", 
// 			"type":"number"
// 		},
// 		{
// 			"label":"Unit D", 
// 			"type":"number"
// 		}
// 	],
// "rows":[
// 		{
// 		"c":[
// 				{"v":"02/03/2017"}, 
// 				{"v":1.0}, 
// 				{"v":10.0},
// 				{"v":2.0}, 
// 				{"v":4}
// 			]
// 		},
// 		{
// 		"c":[
// 				{"v":"02/04/2017"}, 
// 				{"v":1.0}, 
// 				{"v":10.0},
// 				{"v":2.0}, 
// 				{"v":4}
// 			]
// 		},
// 		{
// 		"c":[
// 				{"v":"02/04/2017"}, 
// 				{"v":1.0}, 
// 				{"v":10.0},
// 				{"v":2.0}, 
// 				{"v":4}
// 			]
// 		}
// 	]
// };
		var jsonData = $.ajax({
				url: "myfile.json",
				dataType: "json",
				async: false
			}).responseText;
		var data = new google.visualization.DataTable(jsonData);
		var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

		chart.draw(data);
	}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

一切都很好,请尝试验证您的JSON文件。您可以粘贴代码here,看看您的JSON文件是否存在错误。

你可能在最后错过了一个大括号。