[英]Sort X axis in google charts by month names
I want to sort the month names on the X axis using google charts.我想使用谷歌图表对 X 轴上的月份名称进行排序。 I currently use
dataGroup.sort([{column: 0}]);
我目前使用
dataGroup.sort([{column: 0}]);
to sort alphabetically.按字母顺序排序。 How do i sort the values w.r.t the month?
我如何对当月的值 w.r.t 进行排序?
var dataGroup = google.visualization.data.group(
sliderData,
[0, 2],
[{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'Count'}]
);
dataGroup now has data something like- 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)}
you can use the DataView
class and the setRows
method to set a custom sort order.您可以使用
DataView
class 和setRows
方法来设置自定义排序顺序。
the setRows
method works by providing an array of row indexes in the order the rows should appear. setRows
方法通过按行应该出现的顺序提供行索引数组来工作。
in this example, we use an array of month names to determine the correct order.在此示例中,我们使用月份名称数组来确定正确的顺序。
then we sort the row indexes accordingly, and use setRows
to build the data table.然后我们对行索引进行相应的排序,并使用
setRows
构建数据表。
1. create an array with the month names in the correct order 1.以正确的顺序创建一个包含月份名称的数组
var monthOrder = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];
2. use the getSortedRows
method to get an array of the row indexes from the data table 2.使用
getSortedRows
方法从数据表中获取行索引数组
var rows = data.getSortedRows([{column: 0}]);
3. sort the array of row indexes using the name index from the month names array 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. create a data view and use the setRows
method to set the custom sort 4.创建数据视图,使用
setRows
方法设置自定义排序
var view = new google.visualization.DataView(data);
view.setRows(rows);
then use the data view to draw the chart然后使用数据视图绘制图表
see following working snippet...请参阅以下工作片段...
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.