Javascript 如何动态添加数据做谷歌时间线图？_Javascript_Charts_Google Visualization

Javascript 如何动态添加数据做谷歌时间线图？

javascript charts google-visualization

Javascript 如何动态添加数据做谷歌时间线图？,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,事实上，我正在尝试使用谷歌时间线图制作一个餐厅预订系统我只是在尝试时间线的功能，然后单击一次，我想用表单中的值将新数据添加到图表中随后，数据将保存在数据库中，甚至在页面加载时从数据库中加载下面是javascript代码 <script type="text/javascript"> google.charts.load("current", { packages: ["timeline"] }); google.charts.setOnLoadCallback

事实上，我正在尝试使用谷歌时间线图制作一个餐厅预订系统

我只是在尝试时间线的功能，然后单击一次，我想用表单中的值将新数据添加到图表中

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

下面是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>


load（“当前”{packages:[“timeline”]}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var container=document.getElementById（'timeline'）；
var chart=newgoogle.visualization.Timeline（容器）；
var dataTable=new google.visualization.dataTable（）；
addColumn（{type:'string'，id:'Tavolo'}）；
addColumn（{type:'date'，id:'Start'}）；
addColumn（{type:'date'，id:'End'}）；
dataTable.addRows([
['Tavolo 1'，新日期（0,0,0,12,00,0），新日期（0,0,0,12,00,0）]，
['Tavolo 2'，新日期（0,0,0,12,00,0），新日期（0,0,0,12,00,0）]，
['Tavolo 3'，新日期（0,0,0,12,30,0），新日期（0,0,0,14,0,0）]，
['Tavolo 3'，新日期（0,0,0,14,30,0），新日期（0,0,0,16,0,0）]，
['Tavolo 3'，新日期（0,0,0,16,30,0），新日期（0,0,0,18,0,0）]，
['Tavolo 4'，新日期（0,0,0,14,30,0），新日期（0,0,0,16,0,0）]，
['Tavolo 4'，新日期（0,0,0,16,30,0），新日期（0,0,0,18,0,0）]，
['Tavolo 5'，新日期（0,0,0,12,0,0），新日期（0,0,0,13,30,0）]，
['Tavolo 6'，新日期（0,0,0,14,0,0），新日期（0,0,0,15,30,0）]，
['Tavolo 7'，新日期（0,0,0,12,30,0），新日期（0,0,0,14,0,0）]，
['Tavolo 8'，新日期（0,0,0,14,30,0），新日期（0,0,0,16,0,0）]，
['Tavolo 8'，新日期（0,0,0,16,30,0），新日期（0,0,0,18,0,0）]，
新的日期（0,0,0,14,30,0），新的日期（0,0,0,16,0,0）]；
变量选项={
时间线：{singleColor:'#ff0000'}
};
图表绘制（数据表、选项）；
//函数删除0个值栏
（函数（）{
var el=container.getElementsByTagName（“rect”）；
风险值宽度=100000000；
var elToRem=[]；
对于（var i=0；i

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

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

将上述函数移到

绘图图函数中，

这将允许函数访问数据表
和图表
变量
也不建议在元素上使用内联事件处理程序
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");
    });

这是在向图表中添加值，但问题是插入数据不正确图表变得不可读，这是使用新日期（$（“#Datanizio”）.val（）从datatime local获取日期值的正确方法吗？是否检查屏幕截图，Arrivo是Datanizio的标签，它的值是19/03/2019 12:00周二2019年3月19日12:21:00 GMT+0100（Ora标准dell'Europa centrale），这是新日期（$（“Datanizio”）.val（））的输出，如果我将其放入警报中，在这种情况下，您应该能够返回到新日期（$（“#Dataniziio”）.val（））
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);
}