使用Plotly和AngularJS绘制REST API响应

Plot REST API response using Plotly and AngularJS

本文关键字：REST API 响应 绘制 AngularJS Plotly 使用      更新时间：2023-09-26

如何从json {month,consumption}中分配a和b值?

REST API响应:

data= {
    "_id": {
    "$oid": "580b8f80c2ef1645d285c884"
    },
    "year": "2012",
    "state": "Indiana",
    "consumption": 3275,
    "month": "january"
    },
    {
    "_id": {
    "$oid": "580b8f81bd966f4110af0111"
    },
    "year": "2012",
    "state": "Indiana",
    "consumption": 6348,
    "month": "february"
    }

app.js: 

var graphPlotterDemoApp = angular.module('graphPlotterDemoApp', ['graphPlotter']);
graphPlotterDemoApp.controller('graphPlotterDemoCtrl', function($scope, $http) {
    var a = ["jan", "feb", "mar", "apr"];
    var b = [10, 15, 13, 17];

    $scope.data={};
    $scope.refresh =  function(){
      $http.get("https://api.mlab.com/api/1/databases/energyx/collections/energydata_2012?&apiKey=6JzRAzvdeqyLKAfQAqMOsLYLvvIdJG6A")
        .success(function(response) {
           $scope.data = response.data;
        });
    };

    var trace1 = {
        x: a,
        y: b,
        type: 'scatter'
    };

    $scope.refresh();
    $scope.graphPlots = [trace1];
});

使用like从json中获取数据

 var a=$scope.data.map(function(a) {return a.month;})
 var b=$scope.data.map(function(a) {return a.consumption;})
相关文章：