按月份名称对谷歌图表中的 X 轴进行排序

问题描述

我想使用谷歌图表对 X 轴上的月份名称进行排序。我目前使用 dataGroup.sort([{column: 0}]); 按字母顺序排序。我如何对月份的值进行排序？

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 类和 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','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>