liniowy wykres liniowy TypeError: t.merge nie jest funkcją

Question

Próbuję użyć przykładu wykresu liniowego @http://jtblin.github.io/angular-chart.js/. Otrzymuję następujący błąd. Czy ktoś może mi podać jakieś wskazówki?

error in console

Oto mój kod. Próbowałem przenieść HTML z widoku interfejsu, aby zobaczyć, czy jest jakiś problem z kątem, ale nie działa również na stronie układu. Prawie kopia wkleiła przykładowy kod ze strony internetowej.

angular.module('app').controller(controllerId, [ 
 
     '$scope', function ($scope) { 
 
      //Line Chart 
 
      $scope.lineLabels = ["January", "February", "March", "April", "May", "June", "July"]; 
 
      $scope.lineSeries = ['Series A', 'Series B']; 
 
      $scope.lineData = [ 
 
       [65, 59, 80, 81, 56, 55, 40], 
 
       [28, 48, 40, 19, 86, 27, 90] 
 
      ]; 
 
      
 
      $scope.lineDatasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }]; 
 
      $scope.lineOptions = { 
 
       scales: { 
 
        yAxes: [ 
 
         { 
 
          id: 'y-axis-1', 
 
          type: 'linear', 
 
          display: true, 
 
          position: 'left' 
 
         }, 
 
         { 
 
          id: 'y-axis-2', 
 
          type: 'linear', 
 
          display: true, 
 
          position: 'right' 
 
         } 
 
        ] 
 
       } 
 
      }; 
 
      } 
 
]);

<div class="box box-info"> 
 
    <div class="box-header with-border"> 
 
     <h3 class="box-title">Line Chart</h3> 
 
     <div class="box-tools pull-right"> 
 
      <button type="button" class="btn btn-box-tool" data-widget="collapse"> 
 
       <i class="fa fa-minus"></i> 
 
      </button> 
 
      <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> 
 
     </div> 
 
    </div> 
 
    <div class="box-body"> 
 
     <div class="chart"> 
 
      <canvas id="line" class="chart chart-line" chart-data="lineData" 
 
        chart-labels="lineLabels" chart-series="lineSeries" chart-options="lineOptions" 
 
        chart-dataset-override="lineDatasetOverride"></canvas> 
 
     </div> 
 
    </div> 
 
    <!-- /.box-body --> 
 
</div>

Answer 1

Sprawdź swoją wersję kątową ... Myślę, że używasz wersji 1.2.x, a nie ma jeszcze funkcję scalania i skośnych chart.js skorzystać z tej funkcji.

Co możesz zrobić, to użyć tego kodu, umieścić go po kątowym załadunku i przed załadunkiem wykresu ...

if (!angular.merge) { 
    angular.merge = (function mergePollyfill() { 
    function setHashKey(obj, h) { 
     if (h) { 
     obj.$$hashKey = h; 
     } else { 
     delete obj.$$hashKey; 
     } 
    } 

    function baseExtend(dst, objs, deep) { 
     var h = dst.$$hashKey; 

     for (var i = 0, ii = objs.length; i < ii; ++i) { 
     var obj = objs[i]; 
     if (!angular.isObject(obj) && !angular.isFunction(obj)) continue; 
     var keys = Object.keys(obj); 
     for (var j = 0, jj = keys.length; j < jj; j++) { 
      var key = keys[j]; 
      var src = obj[key]; 

      if (deep && angular.isObject(src)) { 
      if (angular.isDate(src)) { 
       dst[key] = new Date(src.valueOf()); 
      } else { 
       if (!angular.isObject(dst[key])) dst[key] = angular.isArray(src) ? [] : {}; 
       baseExtend(dst[key], [src], true); 
      } 
      } else { 
      dst[key] = src; 
      } 
     } 
     } 

     setHashKey(dst, h); 
     return dst; 
    } 

    return function merge(dst) { 
     return baseExtend(dst, [].slice.call(arguments, 1), true); 
    } 
    })(); 
} 

Wziąłem ją stąd: deep merge objects with AngularJS