Question

我有一个使用chart.js的应用程序。

有如下指令：

.directive('chart', function () {
        var baseWidth = 600;
        var baseHeight = 400;

        return {
            restrict: 'E',
            template: '<canvas></canvas>',
            scope: {
                chartObject: "=value",
                data: "="
            },
            link: function (scope, element, attrs) {
                var canvas  = element.find('canvas')[0],
                    context = canvas.getContext('2d'),
                    chart;

                var options = {
                    type:   attrs.type   || "Line",
                    width:  attrs.width  || baseWidth,
                    height: attrs.height || baseHeight
                };
                canvas.width = options.width;
                canvas.height = options.height;
                chart = new Chart(context);

                var chartType = attrs.type;

                chart[chartType](scope.data, options);

                //Update when charts data changes
                scope.$watch(function() { return scope.chartObject; }, function(value) {
                    if(!value) return;
                    var chartType = options.type;
                    chart[chartType](scope.chartObject.data, scope.chartObject.options);
                });
            }
        };
    })

然后我得到了具有图表元素的部分：

<div class="page page-charts">

    <section data-ng-controller="chartjsCtrl2">

        <div class="row">


            <div class="col-md-6">

              <section class="md-content-section">
                <md-toolbar class="md-accent">
                  <div class="md-toolbar-tools">
                    Bar Chart js
                  </div>
                </md-toolbar>

                <md-content>
                  <div class="md-content__body">
                    <chart class="chartjs" data-data="chartjsBar" data-type="Bar" value="myChart"></chart>
                  </div>
                </md-content>

              </section>
            </div>
        </div>

    </section>
</div>

最后，有趣的部分，控制器：

.controller("chartjsCtrl2", ["$scope","config","myService","$http",
    function ($scope,config,myService,$http) {

        var inputData=$scope.inputData;
        var promise=$http.get('http://localhost:8080/getChartData');
        //console.log(dataInput);
        promise.success(function(data){
            return $scope.chartjsBar = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    fillColor: config.primary_color,
                    strokeColor: config.primary_color,
                    highlightFill: config.primary_color,
                    highlightStroke: config.primary_color,
                    data:data
                },
                {
                    label: "My Second dataset",
                    fillColor: config.color_warning,
                    strokeColor: config.color_warning,
                    highlightFill: config.color_warning,
                    highlightStroke: config.color_warning,
                    data:data
                }
            ]
        }           

        })
        promise.success(function(data){
            console.log(data);
            dataInput=data;

        });
 }
])

现在问题是它没有显示条形图。即使我将硬编码值放在数据集的数据字段中，我也无法让它运行。有人可以帮忙吗？

编辑： - 我必须澄清。代码可以工作，如果它不在http.get的成功回调函数内，但拒绝工作，如果它。

Answer 1

请参阅https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js

var useLegacyPromise = true; /** * @ngdoc method * @name $httpProvider#useLegacyPromiseExtensions * @description * * Configure $ HTTP service to return promises without the shorthand methods成功and错误. * This should be used to make sure that applications work without these methods. * * Defaults to true. If no value is specified, returns the current configured value. * * @param {boolean=} value If true, $ HTTP will return a promise with the deprecated legacy成功and错误methods. * * @returns {boolean|Object} If a value is specified, returns the $httpProvider for chaining. * otherwise, returns the current configured value. **/ this.useLegacyPromiseExtensions = function(value) { if (isDefined(value)) { useLegacyPromise = !!value; return this; } return useLegacyPromise; };

不推荐使用

promise()方法，因此只需使用then()方法，

promise()方法通过自我使用＆＃39;然后（）＆＃39;方法：

if (useLegacyPromise) {
    promise.success = function(fn) {
      assertArgFn(fn, 'fn');

      promise.then(function(response) {
        fn(response.data, response.status, response.headers, config);
      });
      return promise;
    };
    ....

但请注意，promise()获取 response.data ，而then()获取响应。在你的情况下，我会尝试坚持使用then()方法：

var promise=$http.get('http://localhost:8080/getChartData').then(function (response) {
  // your data is under response.data now
  .......
}, optionalErrorFunc, optionalNotifyFunc);

无法读取未定义的属性“数据集”：尝试通过$ http.get获取数据时

1 个答案: