如何从data.txt加载数据替换Google Charts中的硬编码表格数据

解决方案 #

你之前的代码仅写了路径定义和解析逻辑，没有实际发起HTTP请求获取文件内容，所以无法正常运行。按照以下步骤修改即可实现需求：

步骤1：确认data.txt文件格式

你的data.txt直接存放原硬编码的数组数据行即可，内容示例如下：

['01.11.2021', 1.12, 1.49, 1.50],
['02.11.2021', 1.18, 1.52, 1.55],
['03.11.2021', 1.22, 1.55, 1.70],
['04.11.2021', 1.25, 1.30, 1.75],
['05.11.2021', 1.26, 1.61, 1.79],
['06.11.2021', 1.30, 1.70, 1.85],
['07.11.2021', 1.40, 1.81, 1.95],
['08.11.2021', 1.45, 1.85, 1.99],
['09.11.2021', 1.53, 1.90, 2.00]

注意最后一行不要加逗号，避免解析报错。

步骤2：修改JS代码加载并解析数据

用原生fetch API读取文件，解析后合并表头再传入绘图方法，完整代码如下：

<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(loadDataAndDrawChart);

// 先加载数据再绘图
function loadDataAndDrawChart() {
  fetch('data.txt')
    .then(response => response.text())
    .then(text => {
      // 处理文本转成数组
      const dataRows = new Function(`return [${text}]`)();
      // 合并表头
      const fullData = [
        ['Datum', 'E5 (SUPER)', 'E10 (SUPER)', 'B7 (DIESEL)'],
        ...dataRows
      ];
      // 调用原有绘图逻辑
      drawChart(fullData);
    })
    .catch(err => console.error('数据加载失败：', err));
}

function drawChart(fullData) {
  var data = google.visualization.arrayToDataTable(fullData);

  var options = {
    title: 'Preisentwicklung',
    hAxis: {title: '',  titleTextStyle: {color: '#333'}},
    vAxis: {minValue: 1.0}
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
</script>

注意事项

• 不要直接双击打开本地HTML文件运行，需要部署在本地服务环境下，比如用VS Code的Live Server插件启动，否则会因为浏览器同源策略限制无法读取本地txt文件
• 确保data.txt和HTML文件在同一个目录下，如果路径不同要对应修改fetch里的路径
• 如果担心new Function的安全问题，你可以把data.txt改成标准JSON格式（把单引号换成双引号，最后一行不加逗号），直接用JSON.parse([${text}])解析即可

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