JSON可视化

发布时间：2023-05-19

JSON可视化工具与相关技术示例

一、JSON可视化工具

JSON可视化工具是指可将JSON数据可视化呈现的工具。这类工具大多提供基本的查看、分析、编辑功能，并且通常还支持从URL或文件导入JSON数据。 如下是一个使用常见的JSON可视化工具 JSON Editor Online 的示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>JSON Editor Online</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-json.js"></script>
  <script src="https://jsoneditoronline.org/jsoneditor.js"></script>
  <link rel="stylesheet" type="text/css" href="https://jsoneditoronline.org/jsoneditor.css" media="screen" />
</head>
<body>
  <div id="jsoneditor" style="width: 100%; height: 500px;"></div>
  <script>
    var container = document.getElementById('jsoneditor');
    var options = {};
    var editor = new JSONEditor(container, options);
    editor.setText('{"json": "editable"}');
  </script>
</body>
</html>

二、JSON可视化模板

JSON可视化模板是指预定义好特定格式的JSON数据，方便用户基于已有模板进行快速创建。常见的JSON可视化模板有小型图表、表单、卡片等。 下面是一个使用常见的JSON可视化模板 UIkit Icons 的示例代码，实现了在网页上显示一张卡片及图标：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>UIkit Icons</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/css/uikit.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.22/js/uikit.min.js"></script>
</head>
<body>
  <div class="uk-card uk-card-default">
    <div class="uk-card-header">
      <h3 class="uk-card-title">UIkit Icons</h3>
    </div>
    <div class="uk-card-body">
      <i class="uk-icon-justify uk-icon-phone"></i>
      <i class="uk-icon-justify uk-icon-envelope"></i>
      <i class="uk-icon-justify uk-icon-user"></i>
    </div>
  </div>
</body>
</html>

三、JSON可视化UI图

JSON可视化UI图常用于设计和开发人员之间的通信，UI图呈现了JSON数据的预期视觉外观。这些图可以是绘画或电子版。 下面是一个反映UI图的JSON数据的例子：

{
  "color": "#fdd017",
  "elements": [
    {
      "type": "shape",
      "shape": "circle",
      "position": {
        "x": 25,
        "y": 50
      },
      "size": {
        "width": 100,
        "height": 100
      },
      "color": "#a9e2f3",
      "border": {
        "width": 5,
        "color": "#0072c6"
      }
    },
    {
      "type": "text",
      "position": {
        "x": 125,
        "y": 75
      },
      "text": "JSON可视化",
      "font": {
        "family": "Helvetica Neue",
        "size": 24,
        "style": "italic",
        "color": "#0072c6"
      }
    }
  ]
}

四、JSON可视化编辑器安卓

JSON可视化编辑器安卓是指在Android移动设备上使用的JSON数据编辑器。这类编辑器提供了在移动设备上创建和修改JSON数据的便利性。 下面是一个使用常见的JSON可视化编辑器 JSON Editor 的截图，它在手机上显示了JSON数据及其结构。

五、JSON可视化编辑

JSON可视化编辑器允许用户通过可视化界面来编辑JSON数据，避免直接编辑文本造成的错误和不便。这类编辑器通常提供拖放和即时验证功能。 下面是一个使用常见的JSON可视化编辑器 JSON Beautifier 的示例，它使用浏览器内置的文本输入框进行数据输入和编辑：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSON Beautifier</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"/>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.16.6/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-json.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-html.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.6.3/jsoneditor.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.6.3/jsoneditor.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <h3>JSON Input Editor</h3>
    <hr/>
    <div id="jsonEditor" style="height: 500px;"></div>
    <button class="btn btn-primary btn-lg btn-verify" style="margin-top: 10px;">Verify JSON</button>
    <h3>JSON Output Editor</h3>
    <hr/>
    <div id="jsonOutputEditor" style="height: 500px;"></div>
  </div>
  <script>
    var editor = ace.edit("jsonEditor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/json");
    var jsonEditor = null;
    $("#jsonEditor").keyup(function() {
      try {
        var data = JSON.parse(editor.getValue());
        if (jsonEditor == null) {
          var container = $('#jsonOutputEditor').get(0);
          jsonEditor = new JSONEditor(container, {});
        }
        jsonEditor.set(data);
      } catch {
        // ignore invalid data
      }
    });
    $(".btn-verify").click(function(){
      try {
        var data = JSON.parse(editor.getValue());
        editor.setValue(JSON.stringify(data,null,4));
        alert("valid json");
      } catch (e) {
        console.log(e);
        alert(e.message);
      }
    });
  </script>
</body>
</html>

六、JSON可视化构造

JSON可视化构造指基于已有JSON数据自动生成对应的可视化界面。这种方式是将JSON数据直接映射到UI上，省去手写困难的HTML和JavaScript。 下面的示例是使用常见的JSON可视化工具 Form Builder 在浏览器中构造表单：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="http://cdn.formbuilder.online/FormBuilder-dist-v3.7.2/css/form-render.min.css" />
  <title>Dynamic Form Renderer</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-size: 14px;
    }
    article {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <article>
    <div id="form-container"></div>
  </article>
  <script src="http://cdn.formbuilder.online/FormBuilder-dist-v3.7.2/js/form-render.min.js"></script>
  <script>
    var formRenderOpts = {
      formData: [{
          "type": "header",
          "subtype": "h5",
          "label": "Contact information"
        },
        {
          "type": "text",
          "label": "Your Name",
          "className": "form-control"
        },
        {
          "type": "email",
          "label": "Your Email",
          "className": "form-control"
        }
      ],
      dataType: "json"
    };
    $("#form-container").formRender(formRenderOpts);
  </script>
</body>
</html>

七、JSON可视化插件

JSON可视化插件是指在其他开发环境或工具中安装并使用的插件。这些插件可以增强JSON可视化在其他环境下的使用效果，如在文本编辑器中高亮JSON语法。 下面是一个在常见文本编辑器 VS Code 中使用的JSON可视化插件 Peacock：

// settings.json
{
  "peacock.favoriteColors": [
    "#ff0000", // Red
    "#00ff00", // Green
    "#0000ff"  // Blue
  ]
}

// In your source code
import('./components/header')
  .then(m => {
    const headerComponent = new m.default();
    headerComponent.setPrimaryColor(Peacock.favoriteColor);
    document.body.appendChild(headerComponent.render());
  })
  .catch(error => {
    console.error(error);
  });

八、JSON可视化开源

JSON可视化开源是指在开源社区中公开发布的JSON可视化代码或打包工具。这些开源项目通常有完整的文档和社区支持。 下面是一个使用常见的JSON可视化工具库 JSON Editor 的示例，提供了基于HTML和JavaScript的可视化JSON编辑器：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
</head>
<body>
  <div id="jsoneditor" style="width: 100%; height: 500px;"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.6.3/jsoneditor.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.6.3/jsoneditor.min.css"/>
  <script>
    var container = document.getElementById('jsoneditor');
    var editor = new JSONEditor(container);
    editor.set({ "json": "editable" });
  </script>
</body>
</html>
推荐文章