javascript - Google时间轴如何动态添加数据图表？

实际上，我正在尝试使用Google时间轴图表制作餐厅预订系统。

我只是尝试使用时间轴和onClick的功能，我希望使用表单中的值向图表添加新数据。

随后，数据将保存在数据库中，甚至可以在页面加载时从数据库中加载。



这是JavaScript代码

<script type="text/javascript">
    google.charts.load("current", { packages: ["timeline"] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Tavolo' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
            ['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
            ['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
            ['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
            ['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
            ['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
            ['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
            ['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]]);


        var options = {
            timeline: { singleColor: '#ff0000' }
        };

        chart.draw(dataTable, options);
        // Function to remove 0 value bars
        (function () {
            var el = container.getElementsByTagName("rect");
            var width = 100000000;
            var elToRem = [];
            for (var i = 0; i < el.length; i++) {
                var cwidth = parseInt(el[i].getAttribute("width"));
                if (cwidth < width) {
                    elToRem = [el[i]];
                    width = cwidth;
                }
                else if (cwidth == width) {
                    elToRem.push(el[i]);
                }
            }
            for (var i = 0; i < elToRem.length; i++)
                elToRem[i].setAttribute("fill", "none");
        })();
    }

    function addPrenotazione() {
        dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
    }
</script>

最佳答案

每当添加新数据或更改选项时，都必须重新绘制图表。

    function addPrenotazione() {
        dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
        chart.draw(dataTable, options);
    }

将上述功能移到drawChart函数中，
这将允许函数访问dataTable和chart变量...

也建议不要在元素上使用内联事件处理程序...

onclick="addPrenotazione"

而是在drawChart函数中添加事件。

document.getElementById('prenota').addEventListener('click', addPrenotazione);  // 'prenota' or whatever the button id is...

最后，在修改图表元素时，请等待'ready'，
确保图表已完成绘制...

    // Function to remove 0 value bars
    google.visualization.events.addListener(chart, 'ready', function () {
        var el = container.getElementsByTagName("rect");
        var width = 100000000;
        var elToRem = [];
        for (var i = 0; i < el.length; i++) {
            var cwidth = parseInt(el[i].getAttribute("width"));
            if (cwidth < width) {
                elToRem = [el[i]];
                width = cwidth;
            }
            else if (cwidth == width) {
                elToRem.push(el[i]);
            }
        }
        for (var i = 0; i < elToRem.length; i++)
            elToRem[i].setAttribute("fill", "none");
    });

建议类似以下设置...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Tavolo' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['Tavolo 1', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
    ['Tavolo 2', new Date(0, 0, 0, 12, 00, 0), new Date(0, 0, 0, 12, 00, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 3', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 4', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 4', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 5', new Date(0, 0, 0, 12, 0, 0), new Date(0, 0, 0, 13, 30, 0)],
    ['Tavolo 6', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 30, 0)],
    ['Tavolo 7', new Date(0, 0, 0, 12, 30, 0), new Date(0, 0, 0, 14, 0, 0)],
    ['Tavolo 8', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)],
    ['Tavolo 8', new Date(0, 0, 0, 16, 30, 0), new Date(0, 0, 0, 18, 0, 0)],
    ['Tavolo 9', new Date(0, 0, 0, 14, 30, 0), new Date(0, 0, 0, 16, 0, 0)]
  ]);

  var options = {
    timeline: { singleColor: '#ff0000' }
  };

  chart.draw(dataTable, options);

  // Function to remove 0 value bars
  google.visualization.events.addListener(chart, 'ready', function () {
    var el = container.getElementsByTagName("rect");
    var width = 100000000;
    var elToRem = [];
    for (var i = 0; i < el.length; i++) {
      var cwidth = parseInt(el[i].getAttribute("width"));
      if (cwidth < width) {
        elToRem = [el[i]];
        width = cwidth;
      }
      else if (cwidth == width) {
        elToRem.push(el[i]);
      }
    }
    for (var i = 0; i < elToRem.length; i++)
      elToRem[i].setAttribute("fill", "none");
  });

  document.getElementById('prenota').addEventListener('click', addPrenotazione);

  function addPrenotazione() {
    dataTable.addRows(["Tavolo" + $("#tavolo").val(), new Date($("#datainizio").val()), new Date($("#datafine").val())]);
    chart.draw(dataTable, options);
  }
});

您需要使日期与原始数据的格式匹配，
一年中使用零。

function addPrenotazione() {
  var dateBeg = new Date($("#datainizio").val());
  var dateEnd = new Date($("#datafine").val());
  dataTable.addRow(["Tavolo" + $("#tavolo").val(), new Date(0, 0, 0, dateBeg.getHours(), dateBeg.getMinutes(), dateBeg.getSeconds()), new Date(0, 0, 0, dateEnd.getHours(), dateEnd.getMinutes(), dateEnd.getSeconds())]);
  chart.draw(dataTable, options);
}