如何让这个json被Google charts识别？
要让一个JSON被Google Charts识别，需要按照Google Charts的要求将JSON数据格式化为特定的结构。下面是一种常见的方法：
- 确保你的JSON数据是有效的，没有语法错误。
- 确保你的JSON数据包含一个顶层对象，该对象包含一个键为"cols"的数组和一个键为"rows"的数组。
- "cols"数组定义了数据表的列，每个列对象包含一个"label"键和一个"type"键，分别表示列的标签和数据类型。
- "rows"数组定义了数据表的行，每个行对象包含一个"c"键，该键的值是一个数组，数组中的每个元素表示该行对应列的值。
- 将JSON数据转换为字符串格式。
- 在HTML页面中引入Google Charts的库文件。
- 创建一个HTML元素，用于显示图表。
- 使用JavaScript代码调用Google Charts的API，将JSON数据传递给相应的函数，生成图表。
- 使用
google.visualization.arrayToDataTable()函数将JSON数据转换为Google Charts所需的数据表格式。 - 使用适当的Google Charts函数（如
google.visualization.LineChart()）创建特定类型的图表。 - 使用
draw()函数将图表绘制到指定的HTML元素中。
- 使用
以下是一个示例代码，演示如何将JSON数据转换为Google Charts可识别的格式并生成折线图：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" 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() {
// 假设这是你的JSON数据
var jsonData = {
"cols": [
{"label": "日期", "type": "string"},
{"label": "销售量", "type": "number"}
],
"rows": [
{"c": [{"v": "2022-01-01"}, {"v": 100}]},
{"c": [{"v": "2022-01-02"}, {"v": 150}]},
{"c": [{"v": "2022-01-03"}, {"v": 200}]},
{"c": [{"v": "2022-01-04"}, {"v": 120}]},
{"c": [{"v": "2022-01-05"}, {"v": 180}]}
]
};
// 将JSON数据转换为Google Charts的数据表格式
var data = google.visualization.arrayToDataTable(jsonData);
// 创建折线图
var options = {
title: '销售量统计',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 400px;"></div>
</body>
</html>这个示例将一个包含日期和销售量的JSON数据转换为Google Charts所需的格式，并生成一个折线图。你可以根据自己的需求修改JSON数据和图表的类型、样式等。
相关·内容
1回答
如何让这个json被Google charts识别？
javascript、json
我一直在尝试弄清楚为什么google图表不会将这些JSON数据绘制在折线图中从加载到PHP数组数组的.CSV文件( =>数组( Time =Value => 27.1 ) ( [Value] => 27.0等
然后在JS中转换为json格式，给出这个var = [{"Time":"16:
浏览 1提问于2019-08-19得票数 2
1回答
Google chart y轴，带有奇怪的顺序
php、html、google-visualization
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> google.charts.load('current', {'packages'
浏览 2提问于2020-03-23得票数 1
1回答
google图表中的返回类别条形图
javascript、php、html
)$Total, (string)$Categoria];echo json_encode($json);Mes, Total, Categoria但我想让这个类别出现而不是道达尔只有这样，这个
浏览 7提问于2022-05-25得票数 1
3回答
将JSON日期从Perl发送到google charts
javascript、json、perl、google-visualization
我有一个小的舞者应用程序，它提供一些超文本标记语言(包括调用google charts API的javascript )，对于其他URL，查询数据库并以可以传递给google.visualization.DataTable的形式返回编码的JSON格式的数据。javascript向舞者应用程序查询JSON数据，然后将其传递到google charts中-简化版本为：
<script type="text/javascript"
浏览 3提问于2012-02-21得票数 9
回答已采纳
1回答
使用PHP从SQL Server数据库中获取Google图表
php、sql-server、google-visualization
> <html><script type="text/javascript" <script type="text/javascript">
google.c
浏览 7提问于2019-10-31得票数 1
回答已采纳
6回答
你知道任何图表管理的例子吗？
web-applications
我一直在设计一个用户界面来定义动态图表，这些图表使用记录集进行数据绑定。你知道有什么好的图表管理应用程序吗？或者有什么建议来开发一个吗？
浏览 0提问于2009-02-15得票数 1
1回答
Google图表json错误
javascript、json、charts、google-visualization
我正在尝试使用我的json对象创建一个google char。var Addresses = JSON.parse('{"With Address": 45532627,"Without Address": 10845793}');
google.charts.load("current", {packages:["c
浏览 0提问于2016-11-17得票数 1
回答已采纳
3回答
setOnLoadCallback无法在循环中工作
javascript、google-visualization
在那里，您可以看到一个名为"allData“的对象，其中包含许多数据和当"OnLoad”被触发时要调用的函数。for (var value in allData) {};
//google.charts.setOnLoadCallback(functi
浏览 0提问于2016-12-08得票数 0
2回答
悬停在其上时闪烁的工具提示
javascript、css、angular、charts、google-visualization
当我的鼠标悬停在google图表上的实际工具提示上时，我会得到一个闪烁的工具提示。我一直在寻找解决方案，但到目前为止还不能解决这个问题。在这里他们。//Change: google.charts.load('42',<goo
浏览 15提问于2017-12-24得票数 1
回答已采纳
1回答
让charts.js从Google Sheet JSON数据中读取
json、chart.js
alt=json", function(data) {接下来，我从row1/columnA (名为'charts')获取数据，并获得如下值：document.getElementById("demo").innerHTML = data.feed.entry[0]['gsx$charts现在
浏览 8提问于2018-08-17得票数 0
回答已采纳
1回答
将JSON字符串传递给Play Framework控制器中的Google到Scala视图既不被识别，也不显示图表
scala、playframework、google-visualization
/1.10.2/jquery.min.js"></script> google.charts.load('current', { });
google.charts</em
浏览 2提问于2016-12-09得票数 1
回答已采纳
2回答
我可以在函数调用中写入html正文内容吗？
javascript、html、charts、google-visualization
但是，我不知道如何将表代码包含在function.Need帮助中。 });
</script> google.charts.load('current', {'packages' : [ 'bar' ]});
浏览 5提问于2017-04-25得票数 1
1回答
为Google中的相同图表加载不同的数据源
jquery、google-visualization
我所做的：我编写了一个名为initialize_charts()的函数，它解析给定的JSON，根据Google图表的要求准备数据并绘制这些图表。我从google.setOnLoadCallback调用这个函数。(到目前为止，我已经对json文件名进行了硬编码)。
主要问题：现在不确定当用户选择其他年份的JSON文件时如何重新呈现图表？不知何故，我应该能够将文件名参数传递给google.setOnLoadCallback或goo
浏览 2提问于2013-01-05得票数 0
1回答
使用Socket.io填写google区域图-“google.visualization.DataTable不是构造函数”
node.js、socket.io、google-visualization
google.load('visualization', '1', {});getData();
var data = new google.visualization.DataTableconsole.log(dataArray[0])
浏览 3提问于2016-04-26得票数 1
回答已采纳
1回答
Javascript ajax从C#获取未定义的数据
javascript、c#、asp.net、ajax、google-visualization
这是c#的代码 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]<script> google.load(ajax({
url: "GoogleCha
浏览 1提问于2016-12-03得票数 1
1回答
javascript char.js data.addRow不读取json中的数字
javascript、arrays、charts、google-visualization
我无法让图表从json中读取数字--我将json传递给js -- data.addRow中的图表不像数字那样读取年龄，如果我把一个数字正常工作的话。>
<script type>);
goo
浏览 0提问于2018-10-31得票数 1
回答已采纳
2回答
如何使用ajax和jquery加载google图表？
jquery、ajax、google-visualization
我试着追随 google.load('visualization', '1', {'packages':['corechart']});$(document).ready(function() {
google.set
浏览 1提问于2013-09-05得票数 2
1回答
将数组转换为Google可视化DataTable时丢失的数组项
javascript、json、google-visualization
我正在调用一个返回有效JSON数据的API。Google可视化图表要求数据绑定到来自JavaScript数组的图表，而不是JSON数组(或数组)。因此，使用一个答案，我发现了，我已经做到了这一点。当JSON字符串包含多个项时，它可以很好地工作，但是对于单个JSON (非数组)字符串，一些数据在转换过程中丢失。守则的主要部分是：
var data = JSON.parse('{"Total Users":206,"Active Users"
浏览 5提问于2017-05-22得票数 1
回答已采纳
1回答
在for循环中绘制多个Google图表
javascript、html、charts、google-visualization
我试图在一个for循环中绘制多个Google图表，但似乎无法让它工作。我已经看到一些类似的问题被问到了，但仅限于PHP。有人能帮忙吗？这就是我到目前为止尝试过的
for(var i
浏览 3提问于2017-03-10得票数 4
回答已采纳
1回答
javascript google可视化选择选项
charts、google-visualization
**A Parser-blocking, cross-origin script, https://www.google.com/uds/?if the device has poor network connectivity.**<script type=text/jav
浏览 0提问于2016-09-27得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
