主要借助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. jquery使用淘宝接口跨域查询手机号码归属地实例

    <h1>手机号码归属地查询</h1>    <div class="outer">        <p>请输入手机号码</p& ...

  2. nginx安装(1) – ttlsa教程系列之nginx

    1.必要软件准备 安装pcre 为了支持rewrite功能,我们需要安装pcre   1 # yum install pcre* //如过你已经装了,请跳过这一步 安装openssl 需要ssl的支持 ...

  3. ubuntu下nginx的启停等常用命令

    开发过程中,我们会经常的修改nginx的配置文件,每次修改配置文件都可以先测试下本次修改的配置文件是否正确,可以利用以下命令: ? 1 service nginx -t -c /alidata/ser ...

  4. 编译php5.4的时候出现错误----configure: error: in `/usr/local/src/php540/php-5.4.0':

    错误如下:checking for grep that handles long lines and -e... /bin/grep checking for egrep... /bin/grep - ...

  5. 【转载】java版打字练习软件

    网上找到一个java版的打字的游戏 import java.applet.Applet; import java.applet.AudioClip; import java.awt.Dimension ...

  6. JS跳出框架返回上一页

    链接部分 <a class="link" href="javascript:;" target="_top" onclick=&quo ...

  7. DTD中的属性类型

    <![CDATA[文本内容]]> DTD中的属性类型 全名:character data 在标记CDATA下,所有的标记.实体引用都被忽略,而被XML处理程序一视同仁地当做字符数据看待, ...

  8. C#-WinForm-布局-Anchor-锁定布局、Dock-填充布局、工具箱中的<容器>

    Anchor - 锁定布局,锁定控件对于其父控件或窗体的位置,保持与边框固定的距离还是居中等 Dock - 填充布局,控件是否如何进行填充 ============================== ...

  9. shell 字符串截取

    ${expression}一共有9种使用方法. ${parameter:-word},如果parameter为空,则用word的值做parameter的缺省值 ${parameter:=word},在 ...

  10. OneThink学习笔记01

    OneThink1.0开发手册: http://document.onethink.cn/manual_1_0.html 简介  OneThink是一个开源的内容管理框架,基于最新的ThinkPHP3 ...