需要在我的Angular应用程序中使用AngularFire构建和存储Morris图表数据的指导

Question

我遇到了如何为Angular metrics仪表板应用程序构建数据的问题。

我一直在使用Morris JS的精彩图表库并使用ngMorrisChart指令允许与Angular进行双向绑定。

尽管我进行了研究和阅读，但我仍然无法进行种子设定，保存，编辑和删除这些图表的表格数据。尽管我已经阅读了如何构建和格式化然后存储这些数据，但我真的很失落。

我具有这种结构的方式是具有图形的显示视图，并且在另一个选项卡上它切换到表格视图，我的目标是让用户能够每月输入数据。然后我们有多个仪表板可以重复使用这些控制器。 FIREBASE JSON

"widgetOne": 
  "fa-icon" : "fa-area-chart",
  "labels" : "['2013 A', '2014 A', '2014 B']",
  "last_updated" : "2013-08-31T09:05:08.740Z",
  "position" : "one",
  "priority" : 1,
  "title" : "Title here",
  "type" : "area",
  "xkey" : "period",
  "ykeys" : "['Aold', 'A', 'B']"

更新代码     app.controller（ 'ChartsController'，         function（$ scope，$ firebase）{

        //Initiate Firebase Reference
        var chartsRef = new Firebase('https://dashboard-retro.firebaseio.com/lync/widgets/widgetOne');
        var charts = $firebase(chartsRef).$asObject();
        console.log('Here is the charts object ' + charts.xkey); //Returning as undefined
        console.log('Here is the charts object ' + charts); //Returning as [object Object]

        // set line, area, bar options
        var chartOptions = function(hideGrid) {

            // Need to pull this all in using firebase + $http
            var chartXkey = 'period';

            var chartYkeys = ['Aold', 'A', 'B'];

            var chartLabels = ['2013 A', '2014 A', '2014 B'];

            var chartColors = ['#c3c3c3', '#f36648', '#64bed8'];

            var chart = {
                behaveLikeLine: true,
                xkey: chartXkey,
                ykeys: chartYkeys,
                labels: chartLabels,
                lineColors: chartColors,
                fillOpacity: 0.7,
                lineWidth: 1,
                pointSize: 4,
                gridLineColor: '#cfcfcf',
                hideHover: 'auto',
                resize: true,
                smooth: true
            };
            if(hideGrid) {
                chart.axes = false;
                chart.grid = false;            
            }
            return chart;
        };

        var  data = function() {
            return [
                {period: '2014-01', Aold: 4465279, A: 4932003, B: 187067},
                {period: '2014-02', Aold: 5005381, A: 4948005, B: 181611},
                {period: '2014-03', Aold: 5511556, A: 5423848, B: 223014},
                {period: '2014-04', Aold: 5387309, A: 5074078, B: 207068},
                {period: '2014-05', Aold: 6002556, A: 4733337, B: 330464},
                {period: '2014-06', Aold: 5309628, A: 4443538, B: 962987},
                {period: '2014-07', Aold: 5025872, A: 3831382, B: 1834638}
            ];
        };

        $scope.areaLyncOneOptions = new chartOptions();
        $scope.areaLyncOneData = new data();

    }
);