Блог

Главная - Вопросы по программированию - Как динамически добавлять данные в график временной шкалы Google?

Как динамически добавлять данные в график временной шкалы Google?

#javascript #charts #google-visualization

#javascript #Диаграммы #google-визуализация

Вопрос:

На самом деле я пытаюсь создать систему бронирования ресторанов, используя Google Timeline Chart.

Я просто пробовал функцию временной шкалы и 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>

Ответ №1:

график необходимо перерисовывать всякий раз, когда добавляются новые данные или меняются параметры. 

     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);
}

Комментарии:

1. Это добавляет значение к диаграмме, но проблема в том, что данные вставки неверны, диаграмма становится нечитаемой, это правильный способ получить значение даты из datatime-local с новой датой ($(«#datainizio»).val())?

2. является ли <тип ввода=»datetime-local» class=»form-control» id=»datainizio» />

3. проверьте скриншот, Arrivo — это метка datainizio, и ее значение равно 19/03/2019 12:00

4. Вт 19 марта 2019 12: 21:00 GMT 0100 (стандарт Ora Центральной Европы) это вывод новой даты ($ («datainizio»).val()), если я помещу ее в оповещение

5. в этом случае вы должны иметь возможность вернуться к new Date($("#datainizio").val())