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

Question

我想使用 google 图表对 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)}

Answer 1

您可以使用 DataView class 和 setRows 方法来设置自定义排序顺序。
setRows 方法通过按行应出现的顺序提供行索引数组来工作。

在此示例中，我们使用月份名称数组来确定正确的顺序。
然后我们相应地对行索引进行排序，并使用 setRows 构建数据 table.

1. 创建一个以正确顺序排列月份名称的数组

var monthOrder = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];

2.使用getSortedRows方法从数据table

中获取行索引数组

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>

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

Sort X axis in google charts by month names

html

javascript

charts

google-visualization

react-google-charts