Как я могу отсортировать результат присоединения Google чартов - PullRequest
Новая
       6

Как я могу отсортировать результат присоединения Google чартов

1 голос
/ 02 апреля 2020

У меня есть 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>

1 Ответ

0 голосов
/ 02 апреля 2020

мы не можем помешать методу join сортировать результаты.

, но мы можем использовать DataView для предоставления индивидуального заказа,
, используя метод setRows.

setRows принимает массив индексов строк.
, поэтому мы можем упорядочить индексы строк в порядке дня недели.

здесь мы начнем с использования массива с порядком желаемых дней. 

var sortOrder = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
];

затем l oop объединенной таблицы данных, найдите индекс дня в порядке сортировки,
и поместите индекс строки в эту позицию в нашем массиве. 

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 для загрузки диаграмм Google ...

в соответствии с примечаниями к выпуску ...

Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется последовательно. Пожалуйста, используйте новые gstati c loader с этого момента.

более новую библиотеку можно найти здесь ...

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

это только изменит оператор load, см. Фрагмент выше ...

...