如何對谷歌圖表加入的結果進行排序

Question

我有 2 個 arrayToDataTable，我正在做一個完整的連接來表示圖中的 2，但是在進行連接時，結果是按字母順序排列的。 我需要重新排序或使連接不對結果進行排序，或者找到另一種連接兩個數組的方法。 重要的是，該行的第一個元素將始終是一個字符串，但並不總是相同。

 function drawChart() { var data = ( [ ["X","Chart 1"], ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5] ]); var dt1 = google.visualization.arrayToDataTable(data); var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'X'); data2.addColumn('number', 'Chart 2'); data2.addRows([ ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5], ['Fri', 5], ['Sat', 5] ]); var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(joinedData, { height: 300, width: 600, interpolateNulls: true }); } google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

 <script src="https://www.google.com/jsapi?fake=.js"></script> <div id="chart_div"></div>

Answer 1

我們無法阻止join方法對結果進行排序。

但是我們可以使用DataView來提供自定義訂單，
通過使用setRows方法。

setRows接受一個行索引數組。
所以我們可以按工作日的順序對行索引進行排序。

在這里，我們首先使用一個我們想要的天數順序的數組。

var sortOrder = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
];

然后循環連接的數據表，按排序順序找到當天的索引，
並將行索引放在我們數組中的那個位置。

var sortIndexes = [];
for (var i = 0; i < joinedData.getNumberOfRows(); i++) {
    var day = joinedData.getValue(i, 0);
    sortIndexes[sortOrder.indexOf(day)] = i;
}

最后，創建數據視圖並設置行。

var sortedData = new google.visualization.DataView(joinedData);
sortedData.setRows(sortIndexes);

並使用數據視圖繪制圖表。

var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(sortedData, {
    height: 300,
    width: 600,
    interpolateNulls: true
});

請參閱以下工作片段...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = ([ ['X','Chart 1'], ['Sun', 7], ['Mon', 6], ['Tue', 9], ['Wed', 3], ['Thu', 6] ]); var dt1 = google.visualization.arrayToDataTable(data); var data2 = new google.visualization.DataTable(); data2.addColumn('string', 'X'); data2.addColumn('number', 'Chart 2'); data2.addRows([ ['Sun', 6], ['Mon', 5], ['Tue', 8], ['Wed', 2], ['Thu', 5], ['Fri', 5], ['Sat', 5] ]); var joinedData = google.visualization.data.join(dt1, data2, 'full', [[0, 0]], [1], [1]); var sortOrder = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]; var sortIndexes = []; for (var i = 0; i < joinedData.getNumberOfRows(); i++) { var day = joinedData.getValue(i, 0); sortIndexes[sortOrder.indexOf(day)] = i; } var sortedData = new google.visualization.DataView(joinedData); sortedData.setRows(sortIndexes); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(sortedData, { height: 300, width: 600, interpolateNulls: true }); });

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

注意：推薦使用loader.js而不是jsapi來加載谷歌圖表......

根據發行說明...

通過jsapi加載器保持可用的 Google Charts 版本不再持續更新。 請從現在開始使用新的 gstatic loader 。

可以在這里找到較新的圖書館...

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

這只會更改load語句，請參閱上面的代碼段...