圆环图不显示Chart Js和Backbone js的数据

时间：2014-11-30 17:56:37

标签： javascript backbone.js charts chart.js

我正在制作一个应用程序，我必须在图表中显示数据。我也只想输入最后5个交易来显示。

我正在使用Backbone.js和Chart.js。在我的原型显示数据是没有问题的，因为我只是引导数据。但现在我正试图从我的Backbone Collection中提取数据，但它无法正常工作。我只得到一个透明的图像

// Model
(function (exports) {
    var Transaction = Backbone.Model.extend({
        defaults:  {
            amount: 0,
            transactionDate: "",
            transactionType: "debit",
            category: "miscellaneous",
            description: ""
        },
        categories: [
            "salary",
            "rent",
            "miscellaneous"
        ],
        transactionTypes: [
            "credit",
            "debit"
        ],
        initialize: function() {
                this.set({transactionDate: this.attributes.transactionDate || Date.now()}, {validate: true});
        },
        validate: function(attrs, options) {
            if (attrs['transactionType'] !== undefined && 
                !_.contains(this.transactionTypes, attrs['transactionType'].toLowerCase())) {
                return 'Invalid type: ' + attrs['transactionType'];
            } else if (attrs['category'] !== undefined && 
                !_.contains(this.categories, attrs['category'].toLowerCase())) {
                return 'Invalid category: ' + attrs['category'];
            } else if (attrs['transactionDate'] !== undefined && 
                _.isNaN(parseInt(attrs['transactionDate'])) || attrs['transactionDate'] <   0) {
                return 'Invalid date: '+ attrs['transactionDate'];
            } else if (attrs['amount'] !== undefined && 
                _.isNaN(parseInt(attrs['amount'])) || attrs['amount'] < 0) {
                return 'Invalid amount: '+ attrs['amount'];
            }
            return null;
        }
    });

    // export for global use
    exports.expensus.Models.Transaction = Transaction;

}(this));

这是我正在使用的系列.. 

;(function (exports) {
    var Transactions = Backbone.Collection.extend({
        // stuff and thangs
        model: expensus.Models.Transaction,
        localStorage: new Backbone.LocalStorage('TransactionsCollection'),
        latestFive: function(toJSON) {
            this.sortByDate(-1); // sort latest first

            if (!toJSON) {
                return _.first(this.models, 5);
            } else {
                var models = _.first(this.models, 5),
                        idx = -1,
                        json = [],
                        model;

                while (model = models[++idx]) {
                    json.push(model.attributes);
                }

                return json;
            }
        },
        sortByDate: function(dir) {
            dir = dir || -1;
            this.comparator = function(transaction) {
                return dir * transaction.get("transactionDate");
            };
            this.sort();
        },
        sortByAmount: function(dir) {
            dir = dir || -1;
            this.comparator = function(transaction) {
                return dir * transaction.get("amount");
            };
            this.sort();
        }
    });

    exports.expensus.Collections.Transactions = Transactions;

}(this));

这是图表视图，我在开发工具中没有错误，所以我真的很茫然...... 

;(function (exports){
    var ChartView = Backbone.View.extend({
        el: ".home-page",
        template: Handlebars.compile($("#chart-template").html()),
        chart: null,
        initialize: function () {
            this.listenTo(this.collection, "add", this.render);
            this.listenTo(this.collection, "change", this.render);
            this.$(".chart-view-div").html(this.template());
            this.chart = new Chart($("#expense-chart")[0].getContext("2d"));
            this.render();
        },
        render: function() {
            var self = this;
            var data = this.chartData();
            self.chart.Doughnut(data, {
                responsive: true,
            animateScale: true
            });
        },
        chartData: function() {
            var collection = this.collection.latestFive(true);
            var data = {
                vals: [],
                labels: [],
                allData: []
            };
            var getData = function(color, highlight, labels, vals, collection) {
                var object = {
                    color: color,
                    highlight: highlight,
                    chartData: [
                        {
                            value: "",
                            label: ""
                        }
                    ]
                };
                for (var i = 0; i < labels.length; i++ ) {
                    object.chartData.push(0);
                }
                for (var j = 0; j < vals.length; j++ ) {
                    object.chartData.push(0);
                }
                for (var i = 0; i < collection.length; i++ ) {
                    var item = collection[i];
                    var label = labels.indexOf(item.category);
                    var val = vals.indexOf(item.amount);
                    object.chartData[ { value: val, label: label } ]++;
                }
                return object;
            };
            function getRandomColor() {
                var letters = '0123456789ABCDEF'.split('');
                var color = '#';
                for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
            }
            for (var i = 0; i < collection.length; i++ ) {
                var object = collection[i];
                var color = getRandomColor();   
                var highlight = getRandomColor();
                data.labels.push(object.category);
                data.vals.push(object.amount);
                data.allData.push(getData(color, highlight, data.labels, data.vals, collection));
            }
            return data;
        }
    });

    exports.expensus.Views.ChartView = ChartView;
}(this));

我的添加交易视图

;(function (exports) {
    var AddTransactionView = Backbone.View.extend({
        el: "#add-transaction-page",
        events: {
            "submit .add-transaction-form": "addTransaction"
        },
        initialize: function() {
            this.form = this.$(".add-transaction-form")[0];
        },
        addTransaction: function(evt) {
            if (evt) {
                evt.preventDefault();
            }
            var m = new expensus.Models.Transaction({
                transactionDate: Date.now(),
                transactionType: this.form["trans-type"].value,
                amount: this.form["trans-amount"].value,
                description: this.form["trans-description"].value,
                category: this.form["trans-category"].value
            });

            if(m.validationError === null) {
                this.collection.add(m);
                m.save();
                $(this.el).modal("hide");
                this.form.reset();
            } else {
                alert("Model is invalid: " + m.validationError);
            }
        }
    });

    exports.expensus.Views.AddTransactionView = AddTransactionView;
}(this));

这是我能得到的。我以前用不同的图表完成了这个，但不能用我的生活用圆环图来计算它。

谢谢大家

1 个答案:

答案 0 :(得分：0)

我能看到的主要是你传递的图表数据不是chartjs期望的格式，因此它应该是一个具有value label和{color属性的对象数组。 {1}}但你传递的是不同的东西。所以快速解决这个问题就是按照描述构建一个数组

＆＃13;
＆＃13; 
// Model
var Transaction = Backbone.Model.extend({
  defaults: {
    amount: 0,
    transactionDate: "",
    transactionType: "debit",
    category: "miscellaneous",
    description: ""
  },
  categories: [
    "salary",
    "rent",
    "miscellaneous"
  ],
  transactionTypes: [
    "credit",
    "debit"
  ],
  initialize: function() {
    this.set({
      transactionDate: this.attributes.transactionDate || Date.now()
    }, {
      validate: true
    });
  },
  validate: function(attrs, options) {
    if (attrs['transactionType'] !== undefined && !_.contains(this.transactionTypes, attrs['transactionType'].toLowerCase())) {
      return 'Invalid type: ' + attrs['transactionType'];
    } else if (attrs['category'] !== undefined && !_.contains(this.categories, attrs['category'].toLowerCase())) {
      return 'Invalid category: ' + attrs['category'];
    } else if (attrs['transactionDate'] !== undefined && _.isNaN(parseInt(attrs['transactionDate'])) || attrs['transactionDate'] < 0) {
      return 'Invalid date: ' + attrs['transactionDate'];
    } else if (attrs['amount'] !== undefined && _.isNaN(parseInt(attrs['amount'])) || attrs['amount'] < 0) {
      return 'Invalid amount: ' + attrs['amount'];
    }
    return null;
  }
});


var Transactions = Backbone.Collection.extend({
  // stuff and thangs
  model: Transaction,
  latestFive: function(toJSON) {
    this.sortByDate(-1); // sort latest first

    if (!toJSON) {
      return _.first(this.models, 5);
    } else {
      var models = _.first(this.models, 5),
        idx = -1,
        json = [],
        model;

      while (model = models[++idx]) {
        json.push(model.attributes);
      }

      return json;
    }
  },
  sortByDate: function(dir) {
    dir = dir || -1;
    this.comparator = function(transaction) {
      return dir * transaction.get("transactionDate");
    };
    this.sort();
  },
  sortByAmount: function(dir) {
    dir = dir || -1;
    this.comparator = function(transaction) {
      return dir * transaction.get("amount");
    };
    this.sort();
  }
});


var ChartView = Backbone.View.extend({
  el: ".home-page",
  template: Handlebars.compile($("#chart-template").html()),
  chart: null,
  initialize: function() {
    this.listenTo(this.collection, "add", this.render);
    this.listenTo(this.collection, "change", this.render);
    this.$(".chart-view-div").html(this.template());
    this.chart = new Chart(this.$("#expense-chart")[0].getContext("2d"));
    this.render();
  },
  render: function() {
    var self = this;
    var data = this.chartData();
    this.chart.Doughnut(data, {
      responsive: true,
      animateScale: true
    });
  },
  chartData: function() {
    var collection = this.collection.latestFive(true);
    var data = [];;
    var getData = function(color, highlight, labels, vals, collection) {
      var object = {
        color: color,
        highlight: highlight,
        chartData: [{
          value: "",
          label: ""
        }]
      };
      for (var i = 0; i < labels.length; i++) {
        object.chartData.push(0);
      }
      for (var j = 0; j < vals.length; j++) {
        object.chartData.push(0);
      }
      for (var i = 0; i < collection.length; i++) {
        var item = collection[i];
        var label = labels.indexOf(item.category);
        var val = vals.indexOf(item.amount);
        object.chartData[{
          value: val,
          label: label
        }] ++;
      }
      return object;
    };

    function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    for (var i = 0; i < collection.length; i++) {
      var object = collection[i];
      var color = getRandomColor();
      var highlight = getRandomColor();
      data.push({
        value: object.amount,
        color: color,
        label: object.category
      });

    }
    return data;
  }
});

var collection = new Transactions([{
  amount: 12,
  transactionDate: 1417442176000,
  transactionType: "debit",
  category: "miscellaneous",
  description: ""
}, {
  amount: 13,
  transactionDate: 1417442176000,
  transactionType: "credit",
  category: "salary",
  description: ""
}]);
var view = new ChartView({
  collection: collection
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>


<script id="chart-template" type="text/x-handlebars-template">
  <canvas id="expense-chart"></canvas>
</script>

<div class="home-page">

  <div class="chart-view-div"></div>


</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题