Angular-google-chart--构建和整理数据表。

Question

我用的是 谷歌图表工具指令模块 在我的Angularjs应用中，通过sparql查询获取rdf数据，并在应用中以类似于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);

通过这个解决方案，我可以用数据来绘制图表，但问题是： 日期没有排序 所以趋势线在图表上是曲折的。

我试着在行数组上使用排序功能..:

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

但最后的顺序比初始的更差。

而且我不能像这样在图表对象上使用排序功能，因为这不是一个数组。

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

因为这不是一个数组

日期的格式是这样的。'yyyy-mm-dd' (例如： '2020-02-24')，即使我把它修改成这样，似乎也没有什么改善。'yyyy, mm, dd' 在...之前 新日期 任务。

这里 console.log(myCharObject):

在这里，如果我打印 {{myCharObject}} html模板中的变量。

如何对这个日期进行排序？我是否应该使用其他的方式来定义我的图表，就像描述的那样 此处?

Answer 1

要对一个对象数组进行排序，你需要提供一个自定义的排序函数。

试着使用下面的方法来排序 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);