Google时间表图表应为空白

Question

我正在创建一个谷歌TimeLine图表，除了事实上，当没有数据返回时，图表区域内显示了损坏的文本，这应该保持空白。

我已经检查过我的数据库是否有错误的返回（我评论了所有数据库访问代码以确保填充图表的列表将返回空）并且错误仍然存​​在。

所以我最好的一点是错误是谷歌时间线图表区域本身的一些错误配置。

这是在数据返回时完美运行的代码：

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”可见。 每个空白时段都会出现相同的文本。

Answer 1

有点晚但我设法显示没有画布区域的图表时没有什么可以返回只是添加长度条件来使用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);
    }
}