Google Chartタイムラインでヌル日付を設定する

Question

Google Chart APIを使用してタイムラインチャートを作成しようとしています。しかし、問題は、特定の行にNULLの日付を扱うことができないことです。

はどのようにヌルの開始日と終了日が行を非表示にできますか？

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）を設定すると無効なdatetimeが表示されますが、回避策はありますか？あなたは、サーバーのコードでこれらの投稿をフィルタリングする可能性を持っている場合、すでに間違った行をフィルタリング

Answer 1

は、時間とリソースの無駄です。 これをPHPでフィルタリングしてみてください！

Googleでは、行をフィルタするために使用することができますfilter methodを提供します。このソリューションではDataView classも使用しました。

最初にnew Date()の残りの部分と同時にfilterDateを作成した後、これが実行される前にミリ秒か2秒が経過する可能性があるため、ミリ秒を「ゼロ秒」にします。

//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を我々はミリ秒を「ゼロ」、そして私たちのfilterDateと比較し、その後JSONに変換して。

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