Wie füge ich null Wert in Uhrzeit des Typs auf Google Charts

Question

Ich möchte Null von Timeofday für leere Wert in Google-Charts zu senden, aber es werfen Fehler für mich.

Kann nicht Eigenschaft 'Länge' von null

Wie füge ich null Wert von TimeOfDay Typ lesen? Das ist mein Code.

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

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Day'); 
    data.addColumn('timeofday', 'A'); 
    data.addColumn('timeofday', 'B'); 

    data.addRows([ 
     [new Date(2016, 06, 1), [02, 51, 56], [02, 51, 56]], 
     [new Date(2016, 06, 2), [02, 51, 56], [02, 51, 56]], 
     [new Date(2016, 06, 3), null, [02, 51, 56]], 
     [new Date(2016, 06, 4), [02, 51, 56], [02, 51, 56]], 
    ]); 

    var options = { 
     chart: { 
      title: 'Test', 
      subtitle: 'test' 
     }, 
     width: 900, 
     height: 500 
    }; 

    var chart = new google.charts.Line(document.getElementById('linechart_material')); 
    chart.draw(data, options); 
} 

Ich erwarte, dass mein Diagramm dies ist, aber in Timeofday Typ.

Answer 1

mit einem Diagramm Kern im Vergleich zu einer Material Tabelle arbeitet ...

Sie die folgende Option verwenden können, um das Aussehen zu bekommen und fühlen sich nah an eine Material Tabelle

theme: 'material'

siehe folgendes Beispiel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Day'); 
 
    data.addColumn('timeofday', 'A'); 
 
    data.addColumn('timeofday', 'B'); 
 

 
    data.addRows([ 
 
     [new Date(2016, 06, 1), [02, 51, 56], [02, 52, 56]], 
 
     [new Date(2016, 06, 2), [02, 51, 56], [02, 52, 56]], 
 
     [new Date(2016, 06, 3), null,   [02, 52, 56]], 
 
     [new Date(2016, 06, 4), [02, 51, 56], [02, 52, 56]], 
 
     [new Date(2016, 06, 5), [02, 51, 56], [02, 52, 56]], 
 
    ]); 
 

 
    var options = { 
 
     chart: { 
 
     title: 'Test', 
 
     subtitle: 'test' 
 
     }, 
 
     theme: 'material', 
 
     width: 900, 
 
     height: 500 
 
    }; 
 

 
    var chartCore = new google.visualization.LineChart(document.getElementById('linechart_core')); 
 
    chartCore.draw(data, options); 
 

 
    var chartMatl = new google.charts.Line(document.getElementById('linechart_material')); 
 
    chartMatl.draw(data, google.charts.Line.convertOptions(options)); 
 
    }, 
 
    packages: ['corechart', 'line'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="linechart_core"></div> 
 
<div id="linechart_material"></div>