Google Charts Timeline日期动态设置问题求助

问题背景 #

使用Google Charts开发简易时间表项目，希望通过用户表单输入动态修改时间表中的日期，但尝试将表单变量传入Date对象时无法被识别，导致动态修改失效。

原代码如下：

HTML代码 #

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<h1>Project Timetable</h1>

<body>
  <p>Please input your project dates</p>
  <form id="form1" onsubmit="drawChart(); return false">
    <label for="G2startvar">G1 Start Date: </label><input type="date" id="G2startvar"><br>
    <label for="G2endvar">G1 End Date: </label><input type="date" id="G2endvar"><br>
    <label for="G3startvar">G2 Start date: </label><input type="DATE" id="G3startvar"><br>
    <label for="G3endvar">G2 End Date : </label><input type="date" id="G3endvar"><br>

    <button type="submit" value="Submit">Submit</button>

  </form>

  <div id="timechart" style="height: 1000px;"></div>
</body>

CSS代码 #

h1 {
  color: #3e74ab;
  text-shadow: 1px 1px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}

原JavaScript代码 #

google.charts.load("current", {
  packages: ["timeline"]
});
G2start = parseInt(document.getElementById('G2startvar').value);
G2end = parseInt(document.getElementById('G2endvar').value);
G3start = parseInt(document.getElementById('G3startvar').value);
G3end = parseInt(document.getElementById('G3endvar').value);

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timechart');

  var options = {
    colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
    timeline: {
      rowLabelStyle: {
        fontName: 'Arial',
        fontSize: 25,
        color: '#0000'
      },
      barLabelStyle: {
        fontName: 'Times New Roman',
        fontSize: 32
      }
    },
    'width': 3950,
    'height': 5200,
    avoidOverlappingGridLines: false
  };
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'string',
    id: 'Position'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    [Date(), 'Now', new Date(), new Date()],
    ['Project #1', 'G2', new Date(2022, 11, 15), new Date(2022, 11, 30)],
    ['Project #1', 'G3', new Date(2022, 11, 30), new Date(2023, 5, 17)],
  ]);
  chart.draw(dataTable, options);
}

错误原因分析 #

• 变量初始化时机错误：页面加载时就获取表单输入值，此时用户还未输入，parseInt转换空值会得到NaN，后续无法生成有效Date对象。
• 日期格式处理错误：type="date"输入框返回的是YYYY-MM-DD格式的字符串，不能直接用parseInt转换，需要拆分后转换为Date对象所需的年、月、日参数（注意Date对象的月份是从0开始计数）。
• 未重新获取输入值：表单提交调用drawChart时，没有重新读取最新的用户输入，依然使用页面加载时的无效值。

修正后的JavaScript代码 #

google.charts.load("current", {
  packages: ["timeline"]
});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 表单提交时才获取最新输入值
  const parseDate = (dateStr) => {
    if (!dateStr) return new Date(); // 未输入时默认当前日期
    const [year, month, day] = dateStr.split('-').map(Number);
    return new Date(year, month - 1, day); // 月份减1适配Date对象
  };

  const G2start = parseDate(document.getElementById('G2startvar').value);
  const G2end = parseDate(document.getElementById('G2endvar').value);
  const G3start = parseDate(document.getElementById('G3startvar').value);
  const G3end = parseDate(document.getElementById('G3endvar').value);

  var container = document.getElementById('timechart');

  var options = {
    colors: ['#113477', '#C0C0C0', '#adc6e5', '#72aae4', '#518cc2', '#4A7FB0'],
    timeline: {
      rowLabelStyle: {
        fontName: 'Arial',
        fontSize: 25,
        color: '#0000'
      },
      barLabelStyle: {
        fontName: 'Times New Roman',
        fontSize: 32
      }
    },
    'width': 3950,
    'height': 5200,
    avoidOverlappingGridLines: false
  };
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'string',
    id: 'Position'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    [Date(), 'Now', new Date(), new Date()],
    ['Project #1', 'G2', G2start, G2end],
    ['Project #1', 'G3', G3start, G3end],
  ]);
  chart.draw(dataTable, options);
}

关键修改点 #

• 将获取表单输入值的逻辑移入drawChart函数，确保每次提交时读取最新值。
• 添加parseDate工具函数，处理日期字符串转换：拆分年、月、日，月份减1后生成Date对象；未输入时默认使用当前日期。
• 数据行中直接使用转换后的Date对象变量，替换原有的硬编码日期。

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