如何使用 TXT 文件数据在 Chart.js 中动态绘制图表-html教程-PHP中文网

如何使用 TXT 文件数据在 Chart.js 中动态绘制图表

本文介绍如何通过原生 JavaScript 的 fetch API 读取本地 TXT 文件中的逗号分隔数据，并将其注入 Chart.js 图表，无需 jQuery，兼容现代浏览器，含完整示例与错误处理。

本文介绍如何通过原生 javascript 的 `fetch` api 读取本地 txt 文件中的逗号分隔数据，并将其注入 chart.js 图表，无需 jquery，兼容现代浏览器，含完整示例与错误处理。

要在 Chart.js 中动态加载外部数据（如 TXT 文件），关键在于异步获取文件内容 → 解析为数组 → 传入图表配置。相比硬编码的 xValues 和 yValues，这种方式让图表数据可维护、可复用，且完全脱离 jQuery 依赖。

✅ 前提条件

确保 HTML 页面与 data.txt 文件位于同一服务器目录下（注意：直接双击打开 HTML 文件会因浏览器 CORS 策略导致 fetch 失败；请使用本地开发服务器，如 VS Code 的 Live Server 插件、python3 -m http.server 或任意 HTTP 服务）。
data.txt 内容格式需严格为两行：第一行为 X 轴标签（如时间点、类别），第二行为对应 Y 轴数值，均以英文逗号 , 分隔：
```
50,60,70,80,90,100,110,120,130,140,150
7,8,8,9,9,9,10,11,14,14,15
```

✅ 完整实现代码（含结构与注释）

<!-- 引入 Chart.js（CDN 方式，推荐最新版本） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><!-- 图表容器 --><canvas id="myChart" style="width:100%; max-width:900px; height:auto;"></canvas><script>
document.addEventListener('DOMContentLoaded', () => {
  fetch('data.txt')
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.text();
    })
    .then(text => {
      const lines = text.trim().split('\n');
      if (lines.length < 2) {
        throw new Error('TXT file must contain at least two lines: x-values and y-values.');
      }

      // 解析第一行为 X 轴标签（转为数字数组）
      const xValues = lines[0].split(',').map(s => s.trim()).map(Number);
      // 解析第二行为 Y 轴数据（转为数字数组）
      const yValues = lines[1].split(',').map(s => s.trim()).map(Number);

      // 初始化 Chart.js 图表
      new Chart(document.getElementById('myChart'), {
        type: 'line',
        data: {
          labels: xValues,
          datasets: [{
            label: 'Data Series',
            fill: false,
            lineTension: 0,
            backgroundColor: 'rgba(0, 0, 255, 1.0)',
            borderColor: 'rgba(0, 0, 255, 0.1)',
            data: yValues,
            borderWidth: 2
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: { display: false }
          },
          scales: {
            y: {  // Chart.js v3+ 使用 y/yAxes 统一命名
              min: 6,
              max: 16,
              title: { display: true, text: 'Y Values' }
            },
            x: {
              title: { display: true, text: 'X Values' }
            }
          }
        }
      });
    })
    .catch(error => {
      console.error('❌ 数据加载失败：', error.message);
      document.getElementById('myChart').parentNode.innerHTML = 
        '<p style="color:red; font-weight:bold;">⚠️ 无法加载图表数据，请检查 data.txt 文件路径与格式是否正确。';
    });
});
</script>

⚠️ 注意事项与进阶建议

Chart.js 版本适配：上述代码基于 Chart.js v3.x（当前主流）。若使用 v2.x，请将 scales.y 改为 scales.yAxes[0]，并保留 yAxes: [{...}] 结构。
数据健壮性增强：生产环境建议添加空值校验、NaN 过滤（例如 filter(v => !isNaN(v))）、类型断言等。
多数据集扩展：若需支持更多数据行（如多条折线），可循环 lines.slice(1) 并动态构建 datasets 数组。
替代方案：对更复杂数据（如带标题、JSON 格式），推荐改用 .json 文件，解析更安全简洁：fetch('data.json').then(r => r.json())。