Angular-google-chart - 構建和排序數據表

Question

我正在使用Google 圖表工具指令模塊在我的 Angularjs 應用程序中繪制折線圖/面積圖，該數據來自通過 sparql 查詢檢索到的 rdf 數據，並且在應用程序中以類似 json 的格式提供。

在主要的 controller 我這樣聲明我的繪圖 function ：

$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);

使用此解決方案，我可以使用數據繪制圖表，但問題是：日期排序不正確，因此趨勢線在圖表上呈鋸齒形：

我嘗試在行數組上使用排序 function：

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

但最終的訂單比最初的訂單還要糟糕。

而且我不能像這樣在圖表 object 上使用排序：

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

因為這不是一個數組。

日期采用以下格式： 'yyyy-mm-dd' （例如'2020-02-24' ），即使我在新的 Date分配之前將其修改為'yyyy, mm, dd'似乎也沒有任何改善。

這里console.log(myCharObject) ：

在這里，如果我在 html 模板中打印{{myCharObject}}變量：

如何對這些日期進行排序？ 我應該使用其他方式來定義我的圖表，如此處所述嗎？

Answer 1

要對對象數組進行排序，您需要提供自定義排序 function。

在添加到圖表數據之前，嘗試使用以下對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);