Angular -google-chart - построение и сортировка таблицы данных - PullRequest
Новая
       72

Angular -google-chart - построение и сортировка таблицы данных

2 голосов
/ 16 июня 2020

Я использую модуль директивы Google Chart Tools , чтобы нарисовать линейную диаграмму / диаграмму с областями в моем приложении Angularjs из данных rdf, полученных с помощью запросов sparql и доступных в приложении, в формате json.

В основном контроллере я объявил свою функцию рисования следующим образом: 

$scope.createChart = function () {           

        var json1 = $scope.entities     // here I have my data                   
        var rows = []

        // populate rows with data:
        for (var key in json1) {
            // json1 has extra data I don't need 
            if (json1[key]['sdmx-dimension:refTime'] && json1[key]['dpc:deads']) {
                var date = new Date(json1[key]['sdmx-dimension:refTime']);                           
                var deads = json1[key]['dpc:deads']
                rows.push({ c: [ { v:date }, { v:deads } ] })
            }
        }  

        $scope.myChartObject = {
          "type": "AreaChart",
          "data": {
            "cols": [
              {
                "id": "date",
                "label": "Date",
                "type": "date"
              },
              {
                "id": "deaths",
                "label": "Deaths",
                "type": "number"
              }                     
            ]
          },
          "options": {
            "title": "Deaths trend",                
            "height": 400,
            "width": 600,
            "vAxis": {
              "title": "Deaths",
            },
            "hAxis": {
              "title": "Date"
            }
          }
        }

        // attach the rows to the chart object
        $scope.myChartObject.data.rows = rows

        // template containing the chart
        $scope.callTemplate('drawChart', '#right', true)
}

// wait for sparql query to retrieve data before create chart
// otherwise an empty chart will be drawn!
window.setTimeout( function(){ $scope.createChart() }, 3000);

С помощью этого решения я могу рисовать диаграмму с данными, но проблема: даты не отсортированы правильно, поэтому линия тренда зигзагообразна по графику:

area chart

Я пытался используйте функцию сортировки в массиве строк: 

rows.sort([{column:0}])

, но окончательный порядок даже хуже, чем начальный.

И я не могу использовать сортировку для объекта диаграммы следующим образом: 

$scope.myChartObject.data.sort([{column:0}])

, потому что это не массив.

Даты бывают в следующем формате: 'yyyy-mm-dd' (например, '2020-02-24'), и ничего не улучшается, даже если я изменю его на 'yyyy, mm, dd' раньше новая Дата присвоение.

Здесь console.log(myCharObject):

enter image description here

и здесь если я напечатаю {{myCharObject}} переменную в шаблоне html:

enter image description here

Как отсортировать эти даты? Следует ли мне использовать другой способ определения моей диаграммы, как описано здесь ?

1 Ответ

0 голосов
/ 16 июня 2020

Чтобы отсортировать массив объектов, вам нужно будет предоставить настраиваемую функцию сортировки.

попробуйте использовать следующую команду для сортировки rows, прежде чем добавлять к данным диаграммы ... 

// sort
rows.sort(function (rowA, rowB) {
  return rowA.c[0].v.getTime() - rowB.c[0].v.getTime();
});

например, 

    // populate rows with data:
    for (var key in json1) {
        // json1 has extra data I don't need 
        if (json1[key]['sdmx-dimension:refTime'] && json1[key]['dpc:deads']) {
            var date = new Date(json1[key]['sdmx-dimension:refTime']);                           
            var deads = json1[key]['dpc:deads']
            rows.push({ c: [ { v:date }, { v:deads } ] })
        }
    }  

    // sort
    rows.sort(function (rowA, rowB) {
      return rowA.c[0].v.getTime() - rowB.c[0].v.getTime();
    });

см. Следующий рабочий фрагмент для пример ... 

// test data
var rows = [];
rows.push({c: [{v: new Date(2020, 2, 1)}, {v: 7}]});
rows.push({c: [{v: new Date(2020, 1, 1)}, {v: 7}]});
rows.push({c: [{v: new Date(2020, 0, 1)}, {v: 7}]});

// before sort
console.log("row 1 before", rows[0].c[0].v);

// sort
rows.sort(function (rowA, rowB) {
  return rowA.c[0].v.getTime() - rowB.c[0].v.getTime();
});

// after sort
console.log("row 1 after", rows[0].c[0].v);
...