html Google Charts时间表日期作为变量

lmvvr0a8 于 2022-11-20 发布在 Go

关注(0)|答案(1)|浏览(146)

我目前正在用Google Charts做一个简单的时间表项目，虽然我遇到了一个问题，似乎我不知道如何解决。
我希望通过用户输入更改日期。我已经尝试了一些方法，但不知道如何继续。
下面是jsfiddle链接：
我尝试添加表单和变量，但当我将变量放入日期时，它无法识别它。
代码如下：
第一个

Html

来源：https://stackoverflow.com/questions/74472370/google-charts-timetable-dates-as-variable

1条答案

按热度按时间

k2arahey1#

我使用事件侦听器计算出了这一点，在这里，每次使用“change”事件更新输入时，图表都会被重绘，并检测日期是否有效。
看看这个：

<head>
  <h1>Project Timetable</h1>
  <style>
    h1 {
      color: #3e74ab;
      text-shadow: 1px 1px;
      font-family: "Times New Roman", Times, serif;
      text-align: center;
    }

  </style>
</head>

<body>
  <p>Please input your project dates</p>
  G1 start
  <input type="date" id="g1s"><br>
  G1 end
  <input type="date" id="g1e"><br>
  G2 start
  <input type="date" id="g2s"><br>
  G2 end
  <input type="date" id="g2e"><br>

  <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>
  <script type="text/javascript">
    google.charts.load("current", {
      packages: ["timeline"]
    });
    google.charts.setOnLoadCallback(drawChart);
    
    const g1Dates = {start: undefined, end: undefined};
    const g2Dates = {start: undefined, end: undefined};
    
    function setDateAndRedraw(datesObj, isStart, dateString) {
      const datesArray = dateString.split("-").map(Number);
      datesArray[1]--; // Month number to month index
      datesObj[isStart ? "start" : "end"] = new Date(...datesArray);
      if (datesObj.start && datesObj.end && datesArray[0] > 1990) drawChart(); // Redraw if date has a start and an end, and year is > 1990
    }
    
    document.getElementById("g1s").addEventListener("change", e => setDateAndRedraw(g1Dates, true, e.target.value));
    document.getElementById("g1e").addEventListener("change", e => setDateAndRedraw(g1Dates, false, e.target.value));
    document.getElementById("g2s").addEventListener("change", e => setDateAndRedraw(g2Dates, true, e.target.value));
    document.getElementById("g2e").addEventListener("change", e => setDateAndRedraw(g2Dates, false, e.target.value));

    function drawChart() {

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

      //1st is (G4.5), 2nd is (G2), 3rd is, (G3), 4th is (G3.1), 5th is (G3.2)
      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)],
      ]);
      if (g1Dates.start && g1Dates.end) {
        dataTable.addRows([['Project #1', 'G1', g1Dates.start, g1Dates.end]]);
      }
      if (g2Dates.start && g2Dates.end) {
        dataTable.addRows([['Project #1', 'G2', g2Dates.start, g2Dates.end]]);
      }
      chart.draw(dataTable, options);
    }

  </script>

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

赞(0）回复(0）举报 2022-11-20

我来回答

html Google Charts时间表日期作为变量

1条答案

相关问题

热门标签

最新问答