如何通过JavaScript访问JSON数据并实现数据可视化？

看起来你遇到的核心问题是变量作用域导致的——你在gotData函数里重新声明了var val0，这让它变成了局部变量，和全局的val0不是同一个，所以draw函数始终只能拿到全局变量的初始值0。另外，你还需要正确处理另外三个outputValue，并把JSON里的字符串值转换成数字（方便后续图形操作）。

步骤1：修正变量作用域 #

首先，把需要在draw中访问的变量都声明为全局变量，不要在gotData里用var重新定义它们：

// 全局变量，初始化默认值
var lines = "waiting for data";
var val0 = 0;
var val1 = 0;
var val2 = 0;
var val3 = 0;

function setup() {
  createCanvas(400,400);
  loadJSON('http://www.----------.com/data_to_json.php', gotData);
}

// 保留你的Object.size工具函数
Object.size = function(obj){
 var size = 0, key;
 for(key in obj){
 if(obj.hasOwnProperty(key)) size++;
 }
 return size;
}

function gotData(data) {
 var size = Object.size(data) - 1;
 console.log(size);
 console.log(data[size]['timeStamp']);
 console.log(data[size]['outputValue0'] + " " + data[size]['outputValue1'] + " " + data[size]['outputValue2']+ " " + data[size]['outputValue3']);
 lines = size;
 // 直接赋值给全局变量，不要加var！
 // 同时把字符串转成数字，方便后续图形操作
 val0 = parseInt(data[size]['outputValue0']);
 val1 = parseInt(data[size]['outputValue1']);
 val2 = parseInt(data[size]['outputValue2']);
 val3 = parseInt(data[size]['outputValue3']);
}

function draw(){
 background(158, 152, 207);
 textAlign(LEFT);
 fill(0);
 text('Emotional analysis', 10, height - 370);
 text(lines + ' emotions stored',10,height -20);
 // 现在就能正确显示最新的四个值了
 text(`outputValue0: ${val0}`,10,height -60);
 text(`outputValue1: ${val1}`,10,height -80);
 text(`outputValue2: ${val2}`,10,height -100);
 text(`outputValue3: ${val3}`,10,height -120);

 // 示例：用val0-val3修改图形形状和颜色
 // 比如用val0控制矩形宽度，val1控制高度，val2/val3调整RGB颜色
 fill(val2 * 10, val3 * 10, 150); // 把小数值放大到合理的RGB范围
 rect(100, 100, val0 * 10, val1 * 10); // 数值放大，让图形变化更明显
}

关键说明： #

• 作用域问题：去掉gotData里的var，直接给全局变量赋值，这样draw函数就能访问到最新的JSON数据。
• 字符串转数字：JSON里的outputValue都是字符串类型（比如"20"），用parseInt()或者Number()转换成数字，这样做图形尺寸、颜色计算时更方便。
• 控制台无关错误：你提到的传感器过时错误是p5.js内置的传感器相关代码导致的，和你的JSON数据加载、图形绘制逻辑无关，可以忽略。

扩展：实时更新数据 #

如果需要定时刷新JSON数据（比如实时获取新的情感数据），可以在setup里加一个setInterval，定期调用loadJSON：

function setup() {
  createCanvas(400,400);
  // 初始加载一次数据
  loadJSON('http://www.----------.com/data_to_json.php', gotData);
  // 每10秒自动刷新一次数据
  setInterval(() => {
    loadJSON('http://www.----------.com/data_to_json.php', gotData);
  }, 10000);
}

这样你的可视化图形就能随着JSON数据的更新自动变化啦。

内容的提问来源于stack exchange，提问作者martinaverse