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