Question

我正在尝试使用Google Chart API创建时间轴图表。但问题是我无法处理特定行上的空日期。

如何隐藏具有空开始日期或结束日期的行？

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

function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    google.visualization.events.addListener(chart, 'error', errorHandler); 
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([         
        [ 
            'NTC', 
            'NTC', 
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Briefing Meeting',
            'Baseline',
            new Date('07/07/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Concept Design', 
            'Baseline',     
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Concept Design', 
            'Forecast',     
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Concept Design', 
            'Actual',     
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Detail Design', 
            'Baseline', 
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Detail Design', 
            'Forecast', 
            new Date('07/05/2016'),
            new Date('07/06/2016'),   
        ],
        [ 
            'Detail Design', 
            'Actual', 
            new Date('07/05/2016'),
            new Date(),   
        ],
    ]);

    var colors = [];
    var colorMap = {
        Baseline: '#425cfb',
        Forecast: '#f8ac08',
        Actual: '#06af90',
        NTC: '#1b9e2e'
    }

    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        colors.push(colorMap[dataTable.getValue(i, 1)]);
    }  

    var options = {
        colors: colors,
        timeline: {
            showBarLabels: false, 
            groupByRowLabel: true,

            // rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913'},
            barLabelStyle: { fontName: 'Garamond', fontSize: 6 },
        },

        interpolateNulls: true,
    };
}

如果我设置了新的日期（0），它会显示无效的日期时间，这里有解决方法吗？

Answer 1

当您可以在服务器代码中过滤这些帖子时，过滤已经不正确的行是浪费时间和资源。 尝试在PHP中过滤这些内容！

Google为您提供了filter method，您可以使用它来过滤您的行。我在此解决方案中也使用了DataView class。

首先，我与其余的空filterDate同时创建了一个new Date()，然后我'将'归零'毫秒，因为在执行此操作之前可能会经过一两毫秒。

//use this one to determine what date to filter away.
var filterDate = new Date();
filterDate.setMilliseconds(0);
//Convert to JSON
filterDate = filterDate.toJSON();

然后我使用执行函数的过滤器选项test过滤我想要使用的行，将值，行，列和数据表作为参数传递。如果您希望排除该行，则应返回false：

//filter the rows we actually want
var someRows = dataTable.getFilteredRows([{
  column: 2,
  test: testFunc
}, {
  column: 3,
  test: testFunc
}]);

在我们调用的函数中，testFunc我们将毫秒数归零，然后将其转换为JSON，然后与我们的filterDate进行比较。如果它是相同的，我们判断应该排除该行：

//This is our test function
function testFunc(value) {
  value.setMilliseconds(0);
  return value.toJSON() !== filterDate;
}

最后，我们从DataView发起了dataTable，我们将行设置为刚刚过滤的行：

//Create a dataView object from our dataTable, and set the rows to the ones we just filtered
var dataView = new google.visualization.DataView(dataTable);
dataView.setRows(someRows);

我们很高兴，但如前所述，您应该尝试在服务器端过滤这些内容。

JSFiddle for reference

在Google图表时间轴上设置空日期

1 个答案: