学会了年薪百万，教你javascript读取json 文件, 按json文件中的数据批量处理成指示图。

原创

已于 2025-05-19 15:15:38 修改 · 1k 阅读

于 2025-05-09 20:38:31 首次发布

HTML 利用javascript 读取json 文件, 按json文件中的数据批量处理成指示图

引言

文章末尾关注点赞收藏后，全部代码免费奉上

之前的几篇我尝试找可以显示进度的指示条，比如这篇文章 HTML中利用javascript 函数实现可以拖动的指示条效果.

在这里插入图片描述

还有这篇文章 HTML语言要求可以输入起点，终点值的指示然后用柱状图显示出来

在这里插入图片描述

这两个一个是可以手动拖动指标，但是没办法显示起点终点，第二个是可以手动输入起点终点，和标记的数值。

而我的需求是做一个批量处理 json 数据的应用，可以把json文件中数据每一项都用指示图显示出来。

在本文中我做了一个可以读取 json 文件，自动提取json 文件里的测量值，然后把测量值自动用指示器指示出来的程序

在这里插入图片描述

上传 json 文件

然后自动提取数据并显示出来

在这里插入图片描述

正文

HTML 部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON Range Indicator</title>
    <style>
        /* 样式定义 */
    </style>
</head>

<head>部分包含了文档的元数据：

<meta charset="UTF-8">：设置字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：确保页面在移动设备上正确显示。
<title>：设置页面标题为“JSON Range Indicator”。
<style>：包含页面的CSS样式。

<body>
    <div class="controls">
        <input type="file" id="jsonFile" class="input-file" accept=".json">
        <button id="loadJsonButton">add JSON file</button>
        <button id="clearRangesButton">clear</button>
        <div class="status-message" id="statusMessage"></div>
    </div>
    <div id="rangesContainer"></div>
    <script>
        // JavaScript代码
    </script>
</body>

<body>部分包含了页面的主要内容：

<div class="controls">：包含文件输入、按钮和状态消息的控制区域。
<input type="file" id="jsonFile" class="input-file" accept=".json">：文件输入元素，允许用户选择JSON文件。
<button id="loadJsonButton">add JSON file</button>：按钮，用于加载JSON文件。
<button id="clearRangesButton">clear</button>：按钮，用于清除范围指示器。
<div class="status-message" id="statusMessage"></div>：显示状态消息的区域。
<div id="rangesContainer"></div>：用于显示范围指示器的容器。
<script>：包含JavaScript代码。

Javascript 部分

const jsonFile = document.getElementById('jsonFile');
const loadJsonButton = document.getElementById('loadJsonButton');
const clearRangesButton = document.getElementById('clearRangesButton');
const rangesContainer = document.getElementById('rangesContainer');
const statusMessage = document.getElementById('statusMessage');

这些代码获取了页面中的元素，并将它们存储在变量中：

jsonFile：文件输入元素。
loadJsonButton：加载JSON文件的按钮。
clearRangesButton：清除范围指示器的按钮。
rangesContainer：显示范围指示器的容器。
statusMessage：显示状态消息的区域。

loadJsonButton.addEventListener('click', loadJsonFile);
clearRangesButton.addEventListener('click', clearRanges);

为按钮添加点击事件监听器：

当点击loadJsonButton时，调用loadJsonFile函数。
当点击clearRangesButton时，调用clearRanges函数。

function loadJsonFile() {
   
   
    const file = jsonFile.files[0];
    if (file) {
   
   
        const reader = new FileReader();
        reader.onload = function (e)