如何将JavaScript中Map的数据展示到Google Charts HTML页面

1. 确保脚本依赖正确引入 #

在HTML的<head>或<body>末尾，按顺序引入Google Charts加载器和你的Test.js：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="Test.js"></script>

2. 调整storeData函数返回Promise #

让异步函数明确返回处理好的Map，方便后续获取数据：

// Test.js
async function storeData() {
  const urlDurationMap = new Map();
  // 读取并解析output.csv的核心逻辑（示例）
  const response = await fetch('output.csv');
  const csvContent = await response.text();
  const lines = csvContent.split('\n').filter(line => line.trim() !== '');
  
  lines.slice(1).forEach(line => {
    const [url, durationStr] = line.split(',');
    const duration = parseFloat(durationStr);
    // 替换成你的条件判断逻辑
    if (url && !isNaN(duration)) {
      // 保留当前URL的最大Duration值
      if (!urlDurationMap.has(url) || duration > urlDurationMap.get(url)) {
        urlDurationMap.set(url, duration);
      }
    }
  });
  return urlDurationMap;
}

3. 异步加载数据并绘制图表 #

利用Google Charts的加载回调，等待数据准备完成后再生成动态图表：

<script type="text/javascript">
// 加载Google Charts核心图表包
google.charts.load('current', {'packages':['corechart']});

// 定义通用图表绘制函数，接收格式化后的DataTable
function drawChart(chartData) {
  const chartOptions = {
    title: 'URL对应最大Duration统计',
    hAxis: { title: '目标URL', titleTextStyle: { color: '#333' } },
    vAxis: { title: '最大Duration', minValue: 0 },
    width: 900,
    height: 500
  };

  const chart = new google.visualization.ColumnChart(document.getElementById('chart_container'));
  chart.draw(chartData, chartOptions);
}

// 等待Google Charts加载完成后，异步获取数据并渲染图表
google.charts.setOnLoadCallback(async () => {
  try {
    // 获取storeData返回的Map数据
    const dataMap = await storeData();
    // 将Map转换为Google Charts要求的DataTable格式
    const dataTable = new google.visualization.DataTable();
    dataTable.addColumn('string', 'URL');
    dataTable.addColumn('number', '最大Duration');
    // 遍历Map填充数据行
    dataMap.forEach((duration, url) => {
      dataTable.addRow([url, duration]);
    });
    // 触发图表绘制
    drawChart(dataTable);
  } catch (err) {
    console.error('数据加载或图表绘制失败:', err);
  }
});
</script>

<!-- 图表渲染容器 -->
<div id="chart_container"></div>

关键注意事项 #

• 异步处理：storeData是异步函数，必须用await或.then()获取结果，直接同步调用会拿到未完成的Promise。
• 数据类型校验：确保Duration是数字类型（用parseFloat转换），否则Google Charts无法正确渲染数值轴。
• 异常捕获：添加try/catch处理CSV读取失败、数据解析错误等场景，避免页面无响应。

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