主要借助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. Java--剑指offer（5）

    21.输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈序列对 ...

  2. JavaMelody监控SQL

    前言 前面讲过了Javamelody的基本配置,这里简单的介绍下,如何使用Javamelody来监控JDBC以及SQL. 手码不易,转载请注明:xingoo 在网上搜索很多资料,仅有开源社区上的两篇帖 ...

  3. Mybatis——oracle 的模糊查询 和 日期处理

    第一种 1 <if test="AGTNAM !=null and AGTNAM !=''"> <![CDATA[and AGTNAM like concat(c ...

  4. 让Windows新建UTF-8编码的文本文件

    一直以来都是使用[右键->新建->文本文件]的方法来新建一个代码文件,但是存在一个问题新建的文件是大小为0字节的.对于大小为0字节的文件文件,文本编辑器一般都使用MBCS编码,而MBCS编 ...

  5. shell替换一个或多个空格为逗号

    (1)把文本中的一个或者多个空格替换为逗号 文本内容如下: # cat text 1 2 4 2 2 3 4 3 3 4 4 4 4 2 4 (2)shell程序代码为: # cat text | s ...

  6. bzoj4381: [POI2015]Odwiedziny

    这题搞了我一下午……因为一些傻X的问题…… 对于步长大于sqrt(n)的询问,我们可以直接暴力求解 然后,我们可以事先预处理出d[u][step]表示u往上跳,每次跳step步,直到跳到不能跳为止,所 ...

  7. 55.Android之AsyncTask介绍 (转)

    AsyncTask和Handler对比 1 ) AsyncTask实现的原理,和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操 ...

  8. js-JavaScript高级程序设计学习笔记7

    第十一章 DOM扩展 1.对DOM的两个主要的扩展是Selectors API(选择符API)和HTML5. 2.jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getE ...

  9. BZOJ1024 [SCOI2009]生日快乐

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  10. 常用RSS订阅地址

    随着Google Reader关门大吉,转战鲜果网了,RSS订阅地址经过几次折腾,丢的没剩几个了,写个文章记录一下吧,随时补充. --PS-- ,微信.微博之类的是社交平台,不能很好的梳理知识,一直用 ...