Json数据可视化
主要借助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
二、实现原理
-
必需。要转换的 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, '&').replace(/</g, '<').replace(/>/g, '>');
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数据可视化的更多相关文章
- 简单一招实现json数据可视化
开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一 ...
- 前端数据可视化echarts.js使用指南
一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
- [译]学习IPython进行交互式计算和数据可视化（三）
第二章 在本章中,我们将详细学习IPython相对以Python控制台带来的多种改进.特别的,我们将会进行下面的几个任务: 从IPython中使用系统shell以在shell和Python之间进行强大 ...
- 用ElasticSearch和Protovis实现数据可视化
搜索引擎最重要的目的,嗯,不出意料就是搜索.你传给它一个请求,然后它依照相关性返回你一串匹配的结果.我们可以根据自己的内容创造各种请求结构,试验各种不同的分析器,搜索引擎都会努力尝试提供最好的结果. ...
- HTML5大数据可视化效果（二）可交互地铁线路图
前言 最近特别忙,承蒙大伙关照,3D机房的项目一个接着一个,领了一帮小弟,搞搞传帮带,乌飞兔走,转眼已经菊黄蟹肥……有个小弟很不错,勤奋好学,很快就把API都摸透了,自己折腾着做了个HTML5的魔都的 ...
- Web 开发人员必备的随机 JSON 数据生成工具
在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...
- 地理数据可视化：Simple，Not Easy
如果要给2015年的地理信息行业打一个标签,地理大数据一定是其中之一.在信息技术飞速发展的今天,“大数据”作为一种潮流铺天盖地的席卷了各行各业,从央视的春运迁徙图到旅游热点预测,从大数据工程师奇货可居 ...
- Python数据可视化编程实战——导入数据
1.从csv文件导入数据 原理:with语句打开文件并绑定到对象f.不必担心在操作完资源后去关闭数据文件,with的上下文管理器会帮助处理.然后,csv.reader()方法返回reader对象,通过 ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
随机推荐
- ceph calamari 监控系统安装 on ubuntu 14.04
在 ubuntu 14.04 上安装ceph calamari时,遇到calamari web界面中node server可以正常添加,但cluster 集群无法显示的问题. 经过定位,是因为salt ...
- Java--剑指offer（9）
41.输出所有和为S的连续正数序列.序列内按照从小至大的顺序,序列间按照开始数字从小到大的顺序 import java.util.ArrayList; public class Solution { ...
- iOS开发小技巧--计算label的Size的方法总结
计算label的Size方法 sizeWithAttributes:方法 适用于不换行的情况,宽度不受限制的情况 /// 根据指定文本和字体计算尺寸 - (CGSize)sizeWithText:(N ...
- 【POJ 1228】Grandpa's Estate 凸包
找到凸包后暴力枚举边进行$check$,注意凸包是一条线(或者说两条线)的情况要输出$NO$ #include<cmath> #include<cstdio> #include ...
- Self Host WebApi服务传输层SSL加密(服务器端+客户端调用)
接上篇<WebApi服务URI加密及验证的两种方式>,在实际开发中,仅对URI进行加密是不够的,在传输层采用SSL加密也是必须的. 如果服务寄宿于IIS,那对传输层加密非常简单仅需要配置一 ...
- Node.js的net模块
net模块提供了一个异步网络包装器,用于TCP网络编程,它包含了创建服务器和客户端的方法 创建TCP服务器 net.createServer方法 创建客户端去连接服务器 net.connect方法 简 ...
- Yii2的Debug工具
yii2的Debug工具 调用 r=debug 可以对程序进行性能分析,从而对程序进行改良 (1)数据库某条sql语句的执行时间 (2)debug的profiling标签 \YII::beginP ...
- 【BZOJ-1692&1640】队列变换 后缀数组 + 贪心
1692: [Usaco2007 Dec]队列变换 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1153 Solved: 482[Submit][St ...
- Gulp解决发布线上文件(CSS和JS)缓存问题
Gulp解决发布线上文件(CSS和JS)缓存问题 本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非 ...
- Bzoj2683 简单题
Time Limit: 50 Sec Memory Limit: 128 MBSubmit: 1071 Solved: 428 Description 你有一个N*N的棋盘,每个格子内有一个整数, ...