如何对谷歌图表加入的结果进行排序

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语句，请参阅上面的代码段...