原生JavaScript读取txt/csv文件替换图表数据及自动重绘方案咨询

1. 准备数据文件 #

推荐使用CSV格式，结构简单解析方便，新建time_value.csv放在和你的JS文件同级目录，内容如下：

time,value
2020-07-11,90.11
2020-07-12,95.43
2020-07-13,96.24
2020-07-14,91.81
2020-07-15,94.33
2020-07-16,87.41
2020-07-17,93.33
2020-07-18,85.24
2020-07-19,84.39
2020-07-20,78.83

如果用TXT格式也可以，规则和上面一致即可，解析逻辑通用。

2. 读取解析文件并填充图表数据 #

使用原生fetchAPI读取文件，手写极简解析逻辑，不需要任何第三方库：

const chart = some_application.createChart(document.body, {width: 500, height: 400});
const lineSeries = chart.addLineSeries();

// 封装读取并更新图表的函数
async function loadAndUpdateChart() {
  try {
    // 读取CSV文件
    const response = await fetch('./time_value.csv');
    if (!response.ok) throw new Error('文件读取失败');
    const csvText = await response.text();
    
    // 解析CSV为目标格式
    const lines = csvText.replace(/\r/g, '').trim().split('\n');
    // 跳过表头，从第二行开始解析
    const data = lines.slice(1).map(line => {
      const [time, value] = line.split(',').map(item => item.trim());
      return { time, value: Number(value) };
    });
    
    // 更新图表数据
    lineSeries.setData(data);
    return csvText; // 返回原始文本用于后续对比是否变更
  } catch (err) {
    console.error('图表数据加载失败:', err);
  }
}

// 页面初始化时首次加载
loadAndUpdateChart();

注意：如果是本地直接打开HTML文件调试会触发跨域限制，使用本地静态服务（如VSCode的Live Server插件）即可正常运行。

3. 自动检测文件更新并重绘 #

原生浏览器环境没有直接监听本地文件变更的API，采用兼容性最好的轮询方案，定期拉取文件对比内容，发生变更则触发重绘：

// 存储上一次读取的文件内容，用于对比变更
let lastFileContent = '';
// 轮询间隔，单位毫秒，这里设为30秒，可根据需求调整
const POLL_INTERVAL = 30 * 1000;

setInterval(async () => {
  const currentContent = await loadAndUpdateChart();
  // 内容发生变更时才更新
  if (currentContent && currentContent !== lastFileContent) {
    lastFileContent = currentContent;
    console.log('检测到数据更新，已重绘图表');
  }
}, POLL_INTERVAL);

如果你的内嵌应用提供了文件变更的通知回调，可以直接在回调中调用loadAndUpdateChart()，替换轮询方案即可。

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