如何避免硬编码DataTable绘制Google多折线图（数据格式化与过滤）

以下是修改后的完整代码，可实现页面加载时显示全部三个系列，下拉选择后展示单个系列：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> 
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawchart);

let obj;

function drawchart() {
  google.script.run.withSuccessHandler(e => {
    const rawData = JSON.parse(e);
    const rows = rawData.slice(1);

    // 生成单系列数据（用于过滤后展示单个区域）
    const singleSeries = rows.reduce((acc, [div, dateStr, volume]) => {
      const date = new Date(dateStr);
      if (!acc[div]) {
        acc[div] = [['Date', 'Volume'], [date, volume]];
      } else {
        acc[div].push([date, volume]);
      }
      return acc;
    }, {});

    // 生成多系列数据（用于页面加载展示全部区域）
    // 收集所有唯一日期并排序
    const allDates = [...new Set(rows.map(row => row[1]))].map(d => new Date(d)).sort((a, b) => a - b);
    // 收集所有唯一销售区域
    const allDivs = [...new Set(rows.map(row => row[0]))];
    // 构建多系列表头
    const multiHeader = ['Date', ...allDivs];
    // 构建多系列数据行，缺失数据填null
    const multiRows = allDates.map(date => {
      const row = [date];
      allDivs.forEach(div => {
        const match = rows.find(row => row[0] === div && new Date(row[1]).getTime() === date.getTime());
        row.push(match ? match[2] : null);
      });
      return row;
    });
    const multiSeries = [multiHeader, ...multiRows];

    // 合并数据对象，添加"All"键对应多系列数据
    obj = {
      ...singleSeries,
      'All': multiSeries
    };

    // 初始加载显示全部系列
    displaychart("All");
  }).draw_linechart();
}

function displaychart(key) {
  const chartdata = new google.visualization.arrayToDataTable(obj[key], false);
  const options = {
    title: '销售数据折线图',
    is3D: true,
    hAxis: { format: 'yyyy-MM-dd' },
    vAxis: { title: '销量' }
  };
  const chart = new google.visualization.LineChart(document.getElementById('line_chart'));
  chart.draw(chartdata, options);
}

// 按钮点击触发过滤
function filtering() {
  const selectedDiv = document.getElementById('sales_div').value;
  displaychart(selectedDiv);
}
</script>
<select id="sales_div">
  <option value="All">全部</option>
  <option value="National">National</option>
  <option value="New City">New City</option>
  <option value="old City">old City</option>
</select>
<button id="srch_btn" onclick="filtering()">搜索</button> 
<div id="line_chart" class="d_c"></div>

关键修改说明 #

1. 数据结构调整

   • 拆分单系列与多系列数据生成逻辑：单系列保留每个销售区域的独立数据集，多系列将所有数据整合为宽格式（日期为第一列，各销售区域为后续列），解决初始加载仅显示单个系列的问题。
   • 处理日期不一致场景：收集所有唯一日期并排序，缺失数据的位置填充null，图表会自动跳过缺失值，保证折线展示的合理性。

2. UI与逻辑修复

   • 下拉框新增"全部"选项，对应All键，逻辑更直观。
   • 补全按钮的filtering()函数，实现下拉值获取与图表切换。
   • 统一DOM元素ID（原代码JS引用line_chart但HTML为line_cont，现已对齐）。
   • 修正下拉选项拼写，与原数据中的old City保持一致，避免匹配失败。

3. 图表可读性优化

   • 添加日期格式化与坐标轴标题，提升图表可读性。

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