Sortieren Sie die Datensätze auf der Grundlage der Zeit Gantt Chart

Question

Haben wir die Option, die Datensätze basierend auf Zeit in Gantt Chart mit Google Charts API zu sortieren. Meine Daten werden intern anhand einiger Kriterien sortiert. Ich habe in der Google-Website gesucht, ich habe kein Glück bekommen. Bitte, bitte hilf mir.

Answer 1

die Daten können vor dem Zeichnen des Diagramms

// sort by start and end dates 
data.sort([{column: 2}, {column: 3}]); 

sortiert werden

dies die Reihenfolge, in der der die Zeilen erscheinen auf dem Diagramm (y-Achse)

das Diagramm sortiert automatisch nach dem Datum auswirken/Zeit auf der x-Achse

folgenden Beispiel sehen ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Task ID'); 
 
    data.addColumn('string', 'Task Name'); 
 
    data.addColumn('date', 'Start Date'); 
 
    data.addColumn('date', 'End Date'); 
 
    data.addColumn('number', 'Duration'); 
 
    data.addColumn('number', 'Percent Complete'); 
 
    data.addColumn('string', 'Dependencies'); 
 
    data.addRows([ 
 
     ['Research', 'Find sources', 
 
     new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null], 
 
     ['Write', 'Write paper', 
 
     null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'], 
 
     ['Cite', 'Create bibliography', 
 
     null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'], 
 
     ['Complete', 'Hand in paper', 
 
     null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'], 
 
     ['Outline', 'Outline paper', 
 
     null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research'] 
 
    ]); 
 

 
    // sort by start and end dates 
 
    data.sort([{column: 2}, {column: 3}]); 
 

 
    new google.visualization.Gantt(document.getElementById('chart_div')).draw(
 
     data, 
 
     { 
 
     height: 275 
 
     } 
 
    ); 
 
    }, 
 
    packages:['gantt'] 
 
}); 
 

 
function daysToMilliseconds(days) { 
 
    return days * 24 * 60 * 60 * 1000; 
 
}

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