График временной шкалы Google должен быть пустым - PullRequest
Новая
       17

График временной шкалы Google должен быть пустым

0 голосов
/ 22 мая 2019

Я создаю график Google TimeLine, который работает хорошо, за исключением того факта, что, когда нет данных для возврата, внутри области диаграммы отображается разбитый текст, который должен оставаться пустым.

Я ужепроверил, был ли какой-то неправильный возврат из моей БД (я прокомментировал весь код доступа к БД, чтобы убедиться, что список, заполняющий диаграмму, вернулся бы пустым) и ошибка не исчезла.

Так что мой лучший выстрел в том, что ошибка в некоторой неверной конфигурации самой области графика времени Google.

Этот код отлично работает при возврате данных: 


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

function reloadChartTimeLine(){
    var inidate=document.getElementById("inidate").value;
    var enddate=document.getElementById("enddate").value;
    var idRack=document.getElementById("idRack").value;

    jQuery.ajax({
          type: "POST",
          url: '<c:url value="/tracking/searchRackTimeLineByDate" />',
          data: { idRack: idRack, inidate: inidate, enddate:enddate },
          success:  function(data) { drawChartTimeLine(data);}
    });

}  

function drawChartTimeLine(response) {
    var data = new google.visualization.DataTable();
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);

    data.addColumn( 'string','Local' );
    data.addColumn( 'string','Situação' );
    data.addColumn( 'date', 'Início' );
    data.addColumn( 'date', 'Fim' );

    if(response!=undefined){
        response.forEach(function (row) {
            data.addRow([
                row.local,
                row.movementStatus,
                new Date(row.startDate), 
                new Date(row.endDate)
            ]);
        });
    }
    data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
    var dateFormat = new google.visualization.DateFormat({
          pattern: 'd/M/yy HH:mm:ss'
    });



    var options = {
            tooltip: {isHtml: true},
            hAxis:{format:"dd/M" },
            timeline: { showBarLabels: false},
            colors: ['#0f434c','#a30404'],

    };
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
          ticks.push(data.getValue(i, 0));
          var duration = (data.getValue(i, 4).getTime() - data.getValue(i, 3).getTime()) / 1000;
          var days = parseInt( duration  / 86400 ) 
          var hours = parseInt( duration / 3600 ) % 24;
          var minutes = parseInt( duration / 60 ) % 60;
          var seconds = duration % 60;

          var tooltip = '<div class="ggl-tooltip"><span>' +
            data.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
            data.getValue(i, 0) + '</span>: ' +
            dateFormat.formatValue(data.getValue(i, 3)) + ' - ' +
            dateFormat.formatValue(data.getValue(i, 4)) + '</div>' +
            '<div class="ggl-tooltip"><span>Duração : </span>' +
            days + 'd '+hours + 'h ' + minutes + 'm ' + seconds + 's ';

          data.setValue(i, 2, tooltip);
        }
    options["hAxis"]["ticks"] = [0]
    chart.draw(data, options);
}

Вот снимок экрана проблемы (нет данных, которые должны быть возвращены за выбранный период);

https://imgur.com/yKN9j9j

Я выделил и вставил битый текст, и он выглядит как «31/12», хотя на холсте диаграммы виден только ломаный «/ 12».Этот же текст встречается для каждого пустого периода.

1 Ответ

0 голосов
/ 03 июня 2019

Немного поздно, но мне удалось показать диаграмму без области холста, когда нечего возвращать, просто добавив условие длины для использования ответа от ajax и поместив весь код внутри этого условия, как показано ниже; спасибо за все советы: 

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

function reloadChartTimeLine(){
    var inidate=document.getElementById("inidate").value;
    var enddate=document.getElementById("enddate").value;
    var idRack=document.getElementById("idRack").value;

    jQuery.ajax({
          type: "POST",
          url: '<c:url value="/tracking/searchRackTimeLineByDate" />',
          data: { idRack: idRack, inidate: inidate, enddate:enddate },
          success:  function(data) { drawChartTimeLine(data);}
    });

}  

function drawChartTimeLine(response) {
    var data = new google.visualization.DataTable();
    var container = document.getElementById('chart_div');
    var chart = new google.visualization.Timeline(container);

    data.addColumn( 'string','Local' );
    data.addColumn( 'string','Situação' );
    data.addColumn( 'date', 'Início' );
    data.addColumn( 'date', 'Fim' );

    if(response!=undefined && response.length>0){
        response.forEach(function (row) {
            data.addRow([
                row.local,
                row.movementStatus,
                new Date(row.startDate), 
                new Date(row.endDate)
            ]);
        });

        data.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}});
        var dateFormat = new google.visualization.DateFormat({
              pattern: 'd/M/yy HH:mm:ss'
        });

        var options = {
                tooltip: {isHtml: true},
                hAxis:{format:"dd/M" },
                timeline: { showBarLabels: false},
                colors: ['#0f434c','#a30404'],

        };
        var ticks = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
              ticks.push(data.getValue(i, 0));
              var duration = (data.getValue(i, 4).getTime() - data.getValue(i, 3).getTime()) / 1000;
              var days = parseInt( duration  / 86400 ) 
              var hours = parseInt( duration / 3600 ) % 24;
              var minutes = parseInt( duration / 60 ) % 60;
              var seconds = duration % 60;

              var tooltip = '<div class="ggl-tooltip"><span>' +
                data.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' +
                data.getValue(i, 0) + '</span>: ' +
                dateFormat.formatValue(data.getValue(i, 3)) + ' - ' +
                dateFormat.formatValue(data.getValue(i, 4)) + '</div>' +
                '<div class="ggl-tooltip"><span>Duração : </span>' +
                days + 'd '+hours + 'h ' + minutes + 'm ' + seconds + 's ';

              data.setValue(i, 2, tooltip);
            }
        options["hAxis"]["ticks"] = [0]
        chart.draw(data, options);
    }
}
...