Question

我正在创建一个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

我选择并粘贴了损坏的文本，尽管在图表画布中只有可见的“ / 12”可见，但它变为“ 31/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);
    }
}

Google时间轴图表应为空白

1 个答案: