主要借助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. Swift基础--Swift中的异常处理

    Swift中的异常处理 OC中的异常处理:方法的参数要求传入一个error指针地址,方法执行完后,如果有错误,内部会给error赋值 Swift中的异常处理:有throws的方法,就要try起来,然后 ...

  2. 【BZOJ 1030】【JSOI 2007】文本生成器 AC自动机+递推

    一直不理解到底怎么做啊,想了好久$TwT$ 最后终于明白了为什么找到第一个满足条件的$fail$就计算,因为避免重复,这个回答,,, 然后$root$下面要接上26个节点,这里26个字母中不在字典内的 ...

  3. Entity Framework Code First （七）空间数据类型 Spatial Data Types

    声明:本文针对 EF5+, Visual Studio 2012+ 空间数据类型(Spatial Data Types)是在 EF5 中引入的,空间数据类型表现有两种: Geography (地理学上 ...

  4. OkHttp：Java 平台上的新一代 HTTP 客户端

    OkHttp 简介 OkHttp 库的设计和实现的首要目标是高效.这也是选择 OkHttp 的重要理由之一.OkHttp 提供了对最新的 HTTP 协议版本 HTTP/2 和 SPDY 的支持,这使得 ...

  5. Java算法-选择排序

    (转载出处) 选择排序的基本思想是遍历数组的过程中,以 i 代表当前需要排序的序号,则需要在剩余的 [i…n-1] 中找出其中的最小值,然后将找到的最小值与 i 指向的值进行交换.因为每一趟确定元素的 ...

  6. json2form实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  7. Java面试知识的认知描述

    连接池:同时操作连接数据库,创建一个连接池,池子里创建一万个数据库链接.根据系统运行情况关闭链接.高峰期链接达到最大MAX进行排队,对在用的链接实现失效时间.有几种:tomcat请求服务器(serve ...

  8. Java套接字

    前言: 本文补充一下Java关于套接字方面的内容,因为其应用相对比较简单,所以下面介绍两个程序实例. ------------------------------------------------- ...

  9. bzoj4402: Claris的剑

    首先,对于本质相同的构造,我们只计算字典序最小的序列 假设序列中最大的元素为top 我们很容易发现这样的序列一定是1,2,..,1,2,3,2,3,...,2,3,4,3,4.........,top ...

  10. python 列表与元组的操作简介

    上一篇:Python 序列通用操作介绍 列表 列表是可变的(mutable)--可以改变列表的内容,这不同于字符串和元组,字符串和元组都是不可变的.接下来讨论一下列表所提供的方法. list函数 可以 ...