[英]Sort X axis in google charts by month names
我想使用谷歌圖表對 X 軸上的月份名稱進行排序。 我目前使用dataGroup.sort([{column: 0}]);
按字母順序排序。 我如何對當月的值 w.r.t 進行排序?
var dataGroup = google.visualization.data.group(
sliderData,
[0, 2],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
);
dataGroup 現在有類似的數據 -
gvjs_K {Sp: null, cf: Array(3), Vf: Array(34), qr: null, cache: Array(0), …}
Sp: null
Vf: Array(34)
0:
c: Array(3)
0: {v: "August"}
1: {v: "Adult Player"}
2: {v: 13307}
length: 3
__proto__: Array(0)
__proto__: Object
1:
c: Array(3)
0: {v: "August"}
1: {v: "Coach"}
2: {v: 4062}
length: 3
__proto__: Array(0)
__proto__: Object
2: {c: Array(3)}
3: {c: Array(3)}
您可以使用DataView
class 和setRows
方法來設置自定義排序順序。
setRows
方法通過按行應該出現的順序提供行索引數組來工作。
在此示例中,我們使用月份名稱數組來確定正確的順序。
然后我們對行索引進行相應的排序,並使用setRows
構建數據表。
1.以正確的順序創建一個包含月份名稱的數組
var monthOrder = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
2.使用getSortedRows
方法從數據表中獲取行索引數組
var rows = data.getSortedRows([{column: 0}]);
3.使用月份名稱數組中的名稱索引對行索引數組進行排序
rows.sort(function (a, b) {
var monthA = data.getValue(a, 0);
var monthB = data.getValue(b, 0);
return monthOrder.indexOf(monthA) - monthOrder.indexOf(monthB);
});
4.創建數據視圖,使用setRows
方法設置自定義排序
var view = new google.visualization.DataView(data);
view.setRows(rows);
然后使用數據視圖繪制圖表
請參閱以下工作片段...
google.charts.load('current', { packages: ['controls', 'corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['April', 2000.9, 1215.3], ['August', 300.5, 2512], ['December', 600.3, 7518.6], ['February', 2500.4, 8852.7], ['January', 1453.5, 5005.7], ['June', 4300.5, 9635.7], ['July', 2588.4, 7418.7], ['March', 3588.5, 1221], ['May', 1666.3, 8518.6], ['November', 2446.3, 6218.6], ['October', 8556.3, 4218.6], ['September', 1222.9, 1415.3] ], true); var chartRaw = new google.visualization.ColumnChart(document.getElementById('chart_div_raw')); chartRaw.draw(data); // sort rows by month name chronologically var monthOrder = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var rows = data.getSortedRows([{column: 0}]); rows.sort(function (a, b) { var monthA = data.getValue(a, 0); var monthB = data.getValue(b, 0); return monthOrder.indexOf(monthA) - monthOrder.indexOf(monthB); }); var view = new google.visualization.DataView(data); view.setRows(rows); var chartSort = new google.visualization.ColumnChart(document.getElementById('chart_div_sort')); chartSort.draw(view); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div>not sorted</div> <div id="chart_div_raw"></div> <div>sorted</div> <div id="chart_div_sort"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.