JS新手求助：如何用TXT文件数据构建Chart.js图表？

一、准备数据文件 #

先确保你的xValues.txt和yValues.txt格式正确，推荐两种格式：

• 逗号分隔单行：例如50,60,70,80,90,100,110,120,130,140,150
• 每行一个数值：

50
60
70
...

二、方法1：原生JavaScript Fetch API（无需依赖jQuery） #

替换原有脚本部分，代码如下：

<canvas id="myChart" style="width:100%;max-width:900px"></canvas>

<script>
// 加载并解析数据文件
async function loadData(url) {
  const response = await fetch(url);
  const text = await response.text();
  // 兼容逗号分隔和每行一个的格式，转成数字数组
  return text.trim().split(/[\n,]/).map(Number);
}

// 数据加载完成后初始化图表
async function initChart() {
  try {
    const xValues = await loadData('/staticFiles/xValues.txt');
    const yValues = await loadData('/staticFiles/yValues.txt');
    
    new Chart("myChart", {
      type: "line",
      data: {
        labels: xValues,
        datasets: [{
          fill: false,
          lineTension: 0,
          backgroundColor: "rgba(0,0,255,1.0)",
          borderColor: "rgba(0,0,255,0.1)",
          data: yValues
        }]
      },
      options: {
        legend: {display: false},
        scales: {
          yAxes: [{ticks: {min: 6, max:16}}],
        }
      }
    });
  } catch (error) {
    console.error('数据加载失败:', error);
    alert('数据加载出错，请检查文件路径或格式');
  }
}

// 启动图表初始化
initChart();
</script>

三、方法2：修复jQuery的$.get用法 #

如果你坚持使用jQuery，必须等两个数据文件都加载完成后再创建图表，代码如下：

<canvas id="myChart" style="width:100%;max-width:900px"></canvas>
<!-- 先确保引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let xValues, yValues;

// 加载x轴数据
$.get('/staticFiles/xValues.txt', function(data) {
  xValues = data.trim().split(/[\n,]/).map(Number);
  checkAndInit();
});

// 加载y轴数据
$.get('/staticFiles/yValues.txt', function(data) {
  yValues = data.trim().split(/[\n,]/).map(Number);
  checkAndInit();
});

// 两个数据都加载完成才创建图表
function checkAndInit() {
  if (xValues && yValues) {
    new Chart("myChart", {
      type: "line",
      data: {
        labels: xValues,
        datasets: [{
          fill: false,
          lineTension: 0,
          backgroundColor: "rgba(0,0,255,1.0)",
          borderColor: "rgba(0,0,255,0.1)",
          data: yValues
        }]
      },
      options: {
        legend: {display: false},
        scales: {
          yAxes: [{ticks: {min: 6, max:16}}],
        }
      }
    });
  }
}
</script>

四、常见问题排查 #

• 路径验证：直接在浏览器地址栏输入/staticFiles/xValues.txt，确认能正常打开文件，路径错误是最常见的问题
• 数据格式：确保TXT文件里没有多余空格、换行或非数字字符，否则会出现NaN导致图表异常
• 跨域限制：本地直接打开HTML文件（file://协议）可能触发跨域，建议用本地服务器（比如Python的python -m http.server）运行项目

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