如何对Google图表联接的结果进行排序

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>

NOTE：建议使用loader.js，而不是jsapi来加载Google图表...

根据release notes ...

不再可以通过jsapi加载程序使用的Google图表版本进行持续更新。从现在起，请使用新的静态loader。

可以在这里找到较新的库...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改load语句，请参见上面的代码段...