主要借助JSON.stringfy( value [, replacer] [, space] )。

一、参考文献

1、json数据可视化：

　　http://www.cnblogs.com/lvdabao/p/4204858.html

2、JSON.stringify 函数使用：

　　https://msdn.microsoft.com/library/cc836459(v=vs.94).aspx

　　http://www.cnblogs.com/ningvsban/p/3660654.html

二、实现原理

参数：

value

必需。要转换的 JavaScript 值（通常为对象或数组）。

replacer

可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略replacer 数组。

space

可选。向返回值 JSON 文本添加缩进、空格和换行符以使其更易于读取。

如果省略 space，则将生成返回值文本，而没有任何额外空格。

如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格。如果 space 大于 10，则文本缩进 10 个空格。

如果 space 是一个非空字符串（例如“\t”），则返回值文本在每个级别中缩进字符串中的字符。

如果 space 是长度大于 10 个字符的字符串，则使用前 10 个字符。

三、代码实现

（一）代码

 <!DOCTYPE html>

 <html>

   <head>

   <style>

     .number{color:#ff0000}

     .key{color:#0000ff}

     .string{color:#33dd00}

     .boolean{color:#ff00ff}

     .null{color:#00ffff}

   </style>

   </head>

   <body>

     <script>

     function output(inp) {

         document.body.appendChild(document.createElement('pre')).innerHTML = inp;

     }

     function syntaxHighlight(json) {

         json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');

         return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {

             var cls = 'number';

             if (/^"/.test(match)) {

                 if (/:$/.test(match)) {

                     cls = 'key';

                 } else {

                     cls = 'string';

                 }

             } else if (/true|false/.test(match)) {

                 cls = 'boolean';

             } else if (/null/.test(match)) {

                 cls = 'null';

             }

             return '<span class="' + cls + '">' + match + '</span>';

         });

     }

     var obj = {num: 1234,str: '字符串',arr: [1,2,3,4,5,6],obj: {

 name: 'tom',age: 10,isMale:false, brother:null,

         like: ['a', 'b',3]}

     };

     function test(valu)

     {

         console.log(valu);

         return valu;

     }

     var str = JSON.stringify(obj, undefined, '_____');

     output(syntaxHighlight(str));

     </script>

   </body>

 <html>

（二）效果

1、JSON.stringify(obj, undefined, '     ');的效果：

2、JSON.stringify(obj, undefined, '_____');的效果：

Json数据可视化的更多相关文章

  1. 简单一招实现json数据可视化

    开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一 ...

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. [译]学习IPython进行交互式计算和数据可视化（三）

    第二章 在本章中,我们将详细学习IPython相对以Python控制台带来的多种改进.特别的,我们将会进行下面的几个任务: 从IPython中使用系统shell以在shell和Python之间进行强大 ...

  4. 用ElasticSearch和Protovis实现数据可视化

    搜索引擎最重要的目的,嗯,不出意料就是搜索.你传给它一个请求,然后它依照相关性返回你一串匹配的结果.我们可以根据自己的内容创造各种请求结构,试验各种不同的分析器,搜索引擎都会努力尝试提供最好的结果. ...

  5. HTML5大数据可视化效果（二）可交互地铁线路图

    前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...

  6. Web 开发人员必备的随机 JSON 数据生成工具

    在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...

  7. 地理数据可视化：Simple，Not Easy

    如果要给2015年的地理信息行业打一个标签,地理大数据一定是其中之一.在信息技术飞速发展的今天,“大数据”作为一种潮流铺天盖地的席卷了各行各业,从央视的春运迁徙图到旅游热点预测,从大数据工程师奇货可居 ...

  8. Python数据可视化编程实战——导入数据

    1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...

  9. D3js初探及数据可视化案例设计实战

    摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...

随机推荐

  1. impdp导入时卡死分析方法

    来源于: http://blog.csdn.net/yfleng2002/article/details/7973997 http://www.cnblogs.com/songling/archive ...

  2. Nginx配置文件详细说明

    在此记录下Nginx服务器nginx.conf的配置文件说明, 部分注释收集与网络. #运行用户user www-data;    #启动进程,通常设置成和cpu的数量相等worker_process ...

  3. iOS开发--利用MPMoviePlayerController播放视频简单实现

    一.包含头文件#import <MediaPlayer/MediaPlayer.h> 二.重点:给MPMoviePlayerController的view设置frame,并且将view添加 ...

  4. 转自文翼的博客：将本地时间转换为 GMT 时间

    在写 RSS 订阅接口的时候,发现最终输出文章的 RSS 时间(GMT时间),在本地上显示的时间和在服务器上显示的时间不一致. 原因是时区不一致,那么在 JavaScript 中,如何将时间转换为统一 ...

  5. c#如何使输入数据类型限制，C#如何添加限制

    验证n位的数字:^\d{n}$ ,例如要输6位数字,不能多也不能少: ^\d{6}$ 验证数字的正则表达式集 验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$ ...

  6. this action could not be completed.try again登陆appstore错误提示

    今天升级10.11后登陆appstore的时候发现报错了: this action could not be completed.try again 解决办法,终端敲入: sudo mkdir -p ...

  7. C#版 Socket编程（最简单的Socket通信功能）

    示例程序是同步套接字程序,功能很简单,只是客户端发给服务器一条信息,服务器向客户端返回一条信息:这里只是一个简单的示例,是一个最基本的socket编程流程,在接下来的文章中,会依次记录套接字的同步和异 ...

  8. Hadoop 权威指南学习1 (主要框架）

    1. Hadoop 最出名的是 MapReduce和 HDFS,不过也有很多其他有用的子项目. 技术栈如下: Core 一系列分布式文件系统和通用I/O的组件和接口(序列化.Java RPC和持久化数 ...

  9. java高新技术-反射

    一.反射的基石->Class类 定义一个类使用 class 有一个类叫Class Java程序中的各个Java类属于同一类事务,描述这类事物的Java类名就是Class. Person类代表人, ...

  10. 【BZOJ-3174】拯救小矮人 贪心 + DP

    3174: [Tjoi2013]拯救小矮人 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 686  Solved: 357[Submit][Status ...