如何提取JSON文件数据加载到CanvasJS图表中完成渲染

你当前贴的JSON片段开头缺失根节点左大括号{，使用前先补全为合法JSON结构，否则解析会报错。以下是完整实现流程：

1. 加载并解析JSON文件 #

浏览器环境下直接用fetch读取本地或接口返回的JSON文件，解析为JS对象后再做数据处理：

async function initChart() {
  // 替换为你的JSON文件实际路径
  const response = await fetch('./data.json');
  const rawJson = await response.json();
  const chartData = formatDataForCanvas(rawJson);
  renderChart(chartData);
}

2. 提取目标整数值 #

你需要的整数值是series数组每一项中的size字段，按照JSON结构逐层访问即可，X轴暂时用序列索引硬编码，后续替换时间戳只需要修改x的赋值逻辑：

function formatDataForCanvas(rawJson) {
  const dataPoints = [];
  // 找到tableName为RSRP的目标表
  const targetTable = rawJson.tables.find(item => item.tableName === 'RSRP');
  // 遍历表内所有series项，提取size作为Y轴值
  targetTable.series.forEach((series, index) => {
    dataPoints.push({
      x: index + 1, // 临时X轴值，后续替换为时间戳/Date对象即可
      y: series.size // 直接取字段拿到整数值
    })
  })
  return dataPoints;
}

提取注意事项 #

• 如果只需要单个指标的数值（比如仅提取RSRP对应的size），遍历时加字段判断即可：if(series.column === 'RSRP') { 存入数据点 }
• 访问字段前建议加非空判断，避免JSON结构变动导致脚本报错
• 拿不准字段路径时，直接在代码里加console.log(rawJson)打印完整对象，顺着控制台输出的结构逐层查找即可，不要跳级访问字段

3. 加载数据到CanvasJS渲染 #

把格式化好的dataPoints传入CanvasJS的配置项，直接渲染即可：

function renderChart(dataPoints) {
  const chart = new CanvasJS.Chart("chartContainer", {
    axisX: {
      title: "采样序列"
    },
    axisY: {
      title: "指标值"
    },
    data: [
      {
        type: "line", // 可按需替换为column/bar等其他图表类型
        dataPoints: dataPoints
      }
    ]
  });
  chart.render();
}

// 页面加载完成后初始化图表
window.onload = initChart;

常见报错排查：如果取字段时返回undefined，先核对JSON结构是否补全了开头缺失的左大括号，再检查访问路径是否和实际结构一致，你当前提供的JSON中，size字段的完整路径为根对象.tables[0].series[对应索引].size。

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