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

【问题标题】：Set null dates on Google Chart Timeline在 Google 图表时间轴上设置空日期
【发布时间】：2016-11-07 04:58:30
【问题描述】：

我正在尝试使用 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,
    };
}

如果我设置 new Date(0) 会显示无效的日期时间，这里有解决方法吗？

【问题讨论】：

Dubz 你能创作一个小提琴吗？
这是我创建的小提琴。这是我在此处发布的内容的修订版。 jsfiddle.net/6s65tat2 如您所见，其他行不应显示日期，例如预测和实际，因为它设置为 new Date()，但它返回当前日期，这不是我想要的达到。
这是更新的小提琴jsfiddle.net/txr3k2z0
如何生成日期？也许一种方法是更改服务器端代码而不是 javascript。
日期来自数据库，使用 PHP 获取，然后将值传递给声明为 new Date() 的 javascript。那么问题是如何在日期不可用时显示一行？

标签： javascript charts google-visualization

【解决方案1】：

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

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

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

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

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

//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

【讨论】：