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作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
随机推荐
- 了解ASP.NET MVC几种ActionResult的本质：JavaScriptResult & JsonResult
在之前的两篇文章(<EmptyResult & ContentResult>和<FileResult>)我们剖析了EmptyResult.ContentResult和F ...
- bzoj3224
学习了下treap #include<iostream> #include<cstdio> #include<cstdlib> using namespace st ...
- js的并行加载与顺序执行
javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...
- 【HDU 5750】Dertouzos（数学）
题目给定n和d,都是10的9次方以内,求1到n里面有几个数最大因数是d?1000000组数据.解:求出d的满足p[i]*d<n的最小质因数是第几个质数.即为答案. #include<cst ...
- Detected both log4j-over-slf4j.jar AND slf4j-log4j12.jar on the class path, preempting StackOverflowError
Caused by: java.lang.IllegalStateException: Detected both log4j-over-slf4j.jar AND slf4j-log4j12.jar ...
- Kudu 实时的存储系统
- Android Studio配置指南总结
转载:http://blog.csdn.net/mynameishuangshuai/article/details/51332790 使用AndroidStudio开发APP已有半年多的时间了,从 ...
- js-JavaScript高级程序设计学习笔记12
第十五章 使用canvas绘图 1.要使用<canvas>元素,必须先设置其width和height属性. 2.要在这块画布上绘图,需要先取得绘图上下文,取得绘图上下文对象的引用,需要调用 ...
- 根据xsd生成C#类
var file = "1.xsd"; // Get the namespace for the schema. CodeNamespace ns = Processor.Proc ...
- WinRAR命令行
用法: rar <命令> -<开关 1> -<开关 N> <压缩文件> <文件...> <@列表文件...> <解压路径\ ...