google chart ajax json - Javascript (1)

📌 相关文章

📜 google chart ajax json - Javascript (1)

📅 最后修改于: 2023-12-03 14:41:35.553000 🧑 作者: Mango

Google Chart 通过 AJAX 和 JSON 动态渲染图表

Google Chart 是一款功能强大的免费 JavaScript 库，可以让你轻松创建交互性图表和数据可视化。它支持各种数据源，包括本地数据、CSV、JSON、Google Spreadsheets 等。

本文将介绍如何通过 AJAX 和 JSON 动态渲染 Google Chart 图表。

步骤

1. 创建一个空的 HTML 页面

在页面中添加一个空的 div，这将是我们将要绘制图表的地方。

<!DOCTYPE html>
<html>
<head>
	<title>Google Chart Ajax JSON - Javascript</title>
	<script src="https://www.gstatic.com/charts/loader.js"></script>
	<script type="text/javascript">
		google.charts.load('current', {'packages':['corechart']});
		google.charts.setOnLoadCallback(drawChart);
		function drawChart() {
			// 在这里创建图表
		}
	</script>
</head>
<body>
	<div id="chart_div"></div>
</body>
</html>

2. 添加数据源

在这个例子中，我们将使用一个 data.json 文件作为数据源。

{
	"cols": [
		{"label":"Month", "type":"string"},
		{"label":"Sales", "type":"number"}
	],
	"rows": [
		{"c":[{"v":"Jan"}, {"v":20}]},
		{"c":[{"v":"Feb"}, {"v":50}]},
		{"c":[{"v":"Mar"}, {"v":10}]},
		{"c":[{"v":"Apr"}, {"v":80}]},
		{"c":[{"v":"May"}, {"v":30}]},
		{"c":[{"v":"Jun"}, {"v":60}]}
	]
}

3. 使用 AJAX 加载数据

在 drawChart 函数中，使用 AJAX 加载 data.json 文件:

function drawChart() {
	var jsonData = $.ajax({
		url: "data.json",
		dataType: "json",
		async: false
	}).responseText;
}

4. 解析数据

解析 JSON 数据并将其转换为 Google Chart 数据表的格式。

function drawChart() {
	var jsonData = $.ajax({
		url: "data.json",
		dataType: "json",
		async: false
	}).responseText;

	var data = new google.visualization.DataTable(jsonData);
}

5. 创建图表

使用 Google Chart API 创建一个图表。

function drawChart() {
	var jsonData = $.ajax({
		url: "data.json",
		dataType: "json",
		async: false
	}).responseText;

	var data = new google.visualization.DataTable(jsonData);

	var options = {
		title: 'Monthly Sales',
		legend: { position: 'bottom' }
	};

	var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

	chart.draw(data, options);
}

6. 运行

打开 HTML 页面，你会看到一个美丽的图表。

总结

我们学习了如何通过 AJAX 和 JSON 动态渲染 Google Chart 图表。这是一个非常实用的技巧，你可以很容易地将其与任何后端语言集成，以获取实时数据并更新图表。

由于涉及到异步加载数据，所以要注意在使用 JavaScript 或 jQuery 的时候，要注意避免回调函数中的变量作用域问题。

完整代码示例：Google Chart Ajax JSON - Javascript