如何将 Json 转换为谷歌可视化数据表

2023-12-11

我有一个方法,使用 ajax 调用服务器来获取 json 结果

var jsonData = $.ajax({
        url: '/Reports/GetJsonData',
        type: 'GET',
        dataType: 'json',
        error: function (err) {
            alert("Error : "+err.statusText);
        }
 }).responseText;

然后我可以将以下 Json 结果获取到“jsonData”变量。

[
 {"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0}
,{"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0}
,{"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}
]

我想将这个结果转换为以下格式

 [['LineName', 'Car', 'Bus','Motorcycle', 'Person','Others'],
  ['L1', 23, 0, 0,0,0],
  ['L2', 0, 0, 6,0,0],
  ['L3', 10, 20, 36,13,0]]

然后我想在谷歌可视化API中使用它来绘制图表

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

我只需要知道是否有任何简单的方法来转换可以传递给 google.visualization 的数据


请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages:['table']
});

function drawChart() {
  var jsonData = [
    {"LineName":"L1","Car":23,"Bus":0,"Motorcycle":0,"Person":0,"Others":0},
    {"LineName":"L2","Car":0,"Bus":0,"Motorcycle":6,"Person":0,"Others":0},
    {"LineName":"L3","Car":10,"Bus":20,"Motorcycle":36,"Person":13,"Others":0}
  ];

  var gglData = [];
  if (jsonData.length > 0) {
    // load column headings
    var colHead = [];
    Object.keys(jsonData[0]).forEach(function (key) {
      colHead.push(key);
    });
    gglData.push(colHead);

    // load data rows
    jsonData.forEach(function (row) {
      var gglRow = [];
      Object.keys(row).forEach(function (key) {
        gglRow.push(row[key]);
      });
      gglData.push(gglRow);
    });
  }

  // arrayToDataTable is a static method, "new" keyword not needed
  var data = google.visualization.arrayToDataTable(gglData);
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 Json 转换为谷歌可视化数据表 的相关文章

  • Google 电子表格中的换行符未在 Google 图表中输出

    这段代码工作完美 除了一个小格式问题 我找不到简单的方法来修复 作为数据源的谷歌电子表格在列中有换行符 然而 在表中 它们看起来好像只是由空格格式化的 我尝试在数据表中使用allowHthml选项 将换行符转换为标签 但这会删除所有格式并使
  • 从 MVC 控制器操作调用 javascript

    我可以调用 javascript 函数吗MVC 控制器动作 不是来自视图页面 并获取返回值 如何 我需要向服务器发出请求来自代码 cs 像这里一样使用 javascript 但这是aspx页面 function getInitData va
  • 关于实体框架上下文生命周期的问题

    我对 ASP NET MVC 应用程序中实体框架上下文的所需生命周期有一些疑问 让上下文在尽可能短的时间内保持活动状态不是最好的吗 考虑以下控制器操作 public ActionResult Index IEnumerable
  • 将 JSON 数据导入 Google 表格

    我从 Web 服务中提取数据 其格式为 JSON 我正在为 Google Sheets 编写一个 Google Apps 脚本 它将为我填充数据 我的问题是 我似乎无法解析它 Doing var dataset myJSONtext Bro
  • 如何在 Django REST Framework 中序列化“对象列表”

    我需要一个序列化器来完成这样的事情 items 12 name item 1 66 name item 2 我应该如何声明我的序列化器才能得到这样的东西 这是否是一个有效的 JSON 还是应该如下所示 items name item 1 i
  • 在 Django 模板中通过键访问字典

    我正在将字典从我的视图传递到模板 所以 key1 value1 key2 value2 传入并循环键 值对很好 但是我还没有找到从特定键直接在视图中访问的优雅解决方案 例如 key1 例如 bu json items key1 我可以使用一
  • dart中解析对象(不支持的操作:无法添加到固定长度列表)

    我有一个用户对象 当用户登录 注册时 该对象保存到云 Firestore 数据库中 因此 当用户登录时 将从数据库中检索用户对象 并且一切正常 直到我尝试对列表 usersProject 执行 添加 操作 Add the new proje
  • Active Directory 会员资格提供商 - 如何对此进行扩展?

    我正在努力通过 AD Membership Provider 启动并运行 MVC 应用程序 但在解决这个问题时遇到了一些问题 我有一个基本配置设置并在我登录时工作 电子邮件受保护 cdn cgi l email protection 密码
  • 在 Play2 和 Scala 中解析没有数据类型的 JSON

    people name Jack age 15 name Tony age 23 name Mike age 19 这是我试图解析的 json 示例 我希望能够对每个人进行 foreach 操作并打印他们的姓名和年龄 我知道当 json 数
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 如何从 Asp.Net Core 中间件通过 JsonResult 进行响应?

    我想通过以下方式回复JsonResult来自 Asp Net Core 中间件 但如何实现这一点并不明显 我用谷歌搜索了很多 但收效甚微 我可以通过JsonResult来自全球的IActionFilter通过设置ActionExecuted
  • MySQL 与 PostgreSQL JSON 搜索功能

    我一直在寻找一篇博客文章或一个功能矩阵 通过 JSON 功能对 MySQL 和 PostgreSQL 进行比较 我找到了一个好的Postgres 的特征矩阵 https www postgresql org about featuremat
  • 自动将文本转换为十进制数 - Access

    我正在尝试使用 ODBC 将数据从 MS SQL Server DB 导入到 MS Access 对于大多数数据类型 导入会正确映射类型 但当 SQL Server 列数据类型为十进制数时 MS Access 会将其转换为文本数据类型 因此
  • Mvc脚手架一对多关系

    我正在使用 MVC 4 EF 4 3 和 MVCScaffolding 包 我有以下简单的模型类 public class Product Key public int ID get set Required public string N
  • 使用 swagger-ui-express 和 swagger-jsdoc 时如何在 swagger 文件中正确使用 $ref

    我开始使用 swagger 与swagger ui express and swagger jsdoc自动记录我现有的 API 它是用nodejs并表达 就像这里描述的那样 example http www acuriousanimal c
  • 如何在asp mvc的视图中加载选定的partialview?

    我正在从事 ASP NET Mvc 项目 我有一个类似于图像的视图 在此输入图像描述 https i stack imgur com xI6Fa jpg 我在布局中设计了右侧面板 我的布局代码 div class col md 3 pane
  • Three.js - 在代码中包含网格数据

    我有这个 Three js 代码 其中 JSON 加载器从文件 models mountain json 加载网格 var Three new function this scene new THREE Scene this camera
  • 使用 CouchDB 提供 HTML 服务

    我正在尝试将 CouchDB 与 HTML 独立 REST 架构一起使用 也就是说 除了 CouchDB 和 ajax 风格的 javascript 调用 CouchDB 之外 没有其他应用程序服务器 看起来交叉脚本是一个问题 我之前使用过
  • Polymer core-ajax 不会发布 JSON?

    我正在使用 core ajax 来检索 JSON 数据 将组件翻转为 JSON 格式回传到服务器则完全是另一回事 在所有情况下 无论传入的 contentType 或 handleAs 参数如何 作为输入传入的 JSON 对象似乎都会被转换

随机推荐

  • Spring Rest - 生成 Json 数据的异常[重复]

    这个问题在这里已经有答案了 我有一个值对象 我想通过 json Rest 调用公开它 我的项目中有许多其他的休息调用都工作得很好 但这个 1 由于某种原因不能 当我尝试返回该对象时 我收到一个我不知道如何解决的异常 值对象代码如下 减去访问
  • 如何将父 div 放置在其子 div 之上?

    我有一个容器 div 它有background color red 这个容器大约有 12 个孩子 最后一个孩子有background color blue 我试图将容器移到孩子的顶部background color blue 我为容器使用了
  • 如何在nodejs aws-sdk模块中设置多个aws凭证?

    我需要对 s3 SNS 等不同服务使用多个 AWS 凭证 var awsS3 require aws sdk var awsSes require aws sdk awsS3 config update region config awsR
  • 如何将 mysql 转储文件导入 Docker mysql 容器

    提前致以问候和感谢 我实际上是 docker 和 docker compose 的新手 迄今为止观看了大量视频并阅读了很多文章并进行了尝试 我有一个前端容器和一个后端容器 它们作为 Dockerfile 和 docker compose 设
  • 在 tableHeaderView 中使用自动布局

    我有一个UIView包含多行的子类UILabel 该视图使用自动布局 我想将此视图设置为tableHeaderView of a UITableView not节标题 该标题的高度将取决于标签的文本 而标签的文本又取决于设备的宽度 自动布局
  • Java 字节码签名

    作为我正在开发的编程语言的编译器的一部分 我在字节码中遇到了通用签名 我正在尝试将其解析并转换为 AST 解析算法大部分都有效 但似乎有一种特殊情况 其中这些签名的格式表现得有点奇怪 以下是其中一些案例 java util Arrays p
  • Spring MVC:即使存在所需的参数,文件上传也会出现错误请求(缺少参数)

    我有一个文件上传控制器 其方法如下所示 RequestMapping value upload method RequestMethod POST produces application json public ResponseBody
  • INDY 10 TCP 服务器 - 与非线程安全 VCL 代码结合

    VCL 不是线程安全的 因此我想在 INDY 10 TCP 中向 gui 写入信息不是一个好主意server execute 功能 如何将信息从服务器执行发送到VCL 我需要修改一个 TBitmap 里面tcpserver execute功
  • 模拟鼠标移动

    我的 UserControl 中有带有图像的 ListView 当我带来图片时 我会在从图像中移除鼠标时重新绘制图片 图片会滋养旧的 但是 当我第二次在同一张图片上绘制时 我不想重新绘制 但是当我拿走 ListView 的教堂时 navoz
  • C 中链表的问题

    我收到的提示要求使用 c 语言的程序来实现链接列表 并为用户提供在链接列表上执行不同功能的选项 需要的功能是 isempty 检查列表是否为空并返回指示是否为空的值 add 向列表尾部添加一个元素 insert 在列表中的特定索引处插入元素
  • 如何防止我的 Python 应用程序在到达代码末尾后自动关闭? [复制]

    这个问题在这里已经有答案了 我是编程新手 尤其是Python 我正在尝试制作一个将华氏温度转换为摄氏度的应用程序 但我不知道如何使该程序保持打开状态 每当它到达代码末尾时 它就会在用户看到他或她的结果之前自动关闭 我正在使用Python 2
  • 由于以下错误而失败:800704a6 尝试从 teamcity 中的文本文件读取数据时

    我正在使用 teamcity 运行一些测试用例 它成功地将数据保存在文本文件中 但是当我尝试从同一位置读取该数据时 出现以下错误 设置方法失败 System Runtime InteropServices COMException 使用 C
  • 自定义 ActiveModel full_messages

    我想从自定义验证消息中删除该属性并仅显示该消息 因此而不是 School Please Provide Your School Name 我想回来 Please Provide Your School Name 正如我的模型中所设置的 va
  • 如何在 UITextView 中插入 UIImageView,就像 iphone 默认消息 (SMS) 应用程序在 UITextView 中插入多媒体内容一样

    我想在具有发送和相机按钮的工具栏的 UITextView 中插入 UIImageView 就像 iPhone 默认短信应用程序一样 你最好使用UIScrollView和管理UITextViews and UIImageView就在里面 UI
  • TinyMCE Editor 不更新 IE11 中的隐藏字段

    我使用 TinyMCE 作为 CMS 的 HTML 编辑器 这一直工作正常 表单提交了正确的数据 就像在 Chrome 中一样 它在 IE 11 中也能正确显示 但是 如果我使用 IE11 提交表单 浏览器不会 POST 表单中的数据 检查
  • 使用选择查询动态添加列

    我有一张表 默认有 20 列 这 20 列命名为 D1 D2 D3 D20 现在通过选择查询我想动态添加其他列 对于前 D21 D22 D31 那么我如何编写一个查询来动态添加此列并增加值 最大限制为 31 请帮助 默认表列D1 D2 D3
  • R- ode 函数(deSolve 包):将参数值更改为时间函数

    我正在尝试使用该函数求解一阶微分方程ode来自deSolve包裹 问题如下 药物在某些时间 输注时间 以恒定的输注速率给药 并以一阶速率消除 因此 该过程可以描述为 if t in Infusion times Infusion lt In
  • qDebug 和 cout 不起作用

    我有这个简单的代码 include
  • XPath:查找一个属性节点(并且只有一个)

    只查找具有某一属性的一个节点 以任一节点为准 的 XPath 是什么 实际上我对属性感兴趣 而不是节点 例如 在我的 XML 中 我有几个具有 lang 属性的标签 我知道它们都必须具有相同的值 我只想得到其中任何一个 现在 我这样做 1
  • 如何将 Json 转换为谷歌可视化数据表

    我有一个方法 使用 ajax 调用服务器来获取 json 结果 var jsonData ajax url Reports GetJsonData type GET dataType json error function err aler