主要借助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. 开发错误12：gradle编译错误：Conflict with dependency com.android.support:support-annotations

    在build.gradle中的configurations.all {}下添加:resolutionStrategy.force 'com.android.support:support-annota ...

  2. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  3. nginx 编译参数详解(运维不得不看)

    nginx参数: --prefix= 指向安装目录 --sbin-path 指向(执行)程序文件(nginx) --conf-path= 指向配置文件(nginx.conf) --error-log- ...

  4. SpringMVC 参数传递

    使用@RequestParam 注解获取GET请求或POST请求提交的参数: 获取Cookie的值:使用@CookieValue : 根据不同的Web请求方法,映射到不同的处理方法:使用登陆页面作示例 ...

  5. 如何破解Excel文档的编辑密码

    对于Excel文档我们不仅可以设置打开密码,还可以设置几天几种密码,比如编辑密码.编辑密码又称写保护密码,是一种可以限制编辑权限的密码.如果我们在日常工作中发现自己忘记了excel编辑密码的话,那就需 ...

  6. Sublime Text 3配置C++编译运行

    2016.9.8更新: linux(Ubuntu16.04)下的配置,编译后用终端运行,解决了不能输入的问题 { "encoding": "utf-8", &q ...

  7. c# 导入导出Excel

    1.引用两个js Codaxy.Xlio.dllCodaxy.Xlio.XmlSerializers.dll 2.导出 public string EntityListToExcel(string p ...

  8. HTML 事件处理

    1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transi ...

  9. CruiseControl.NET配置文件（生产环境版本，与SVN结合自动部署）

    配置如下: 说明:此配置文件的功能是当有SVN修改时,会自动触发并编译发布,间隔为10秒. 由于配置文件上面有注释,如果提示节点配置错误,请删除这些注释. 官方详细节点配置说明:http://www. ...

  10. [NOIP2013] 提高组 洛谷P1970 花匠

    题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...