angular-chartjs line chart TypeError: t.merge is not a function

Question

我正在尝试使用折线图示例@http://jtblin.github.io/angular-chart.js/。我收到以下错误。谁能给我一些指示？

这是我的代码。我已经尝试将 html 移出 ui-view 以查看 angular 是否有任何问题，但在布局页面上也不起作用。几乎复制粘贴了网站上的示例代码。

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

检查你的 angular 版本...我认为你使用的是版本 1.2.X 并且它还没有合并功能，并且 angular-chart.js 使用这个函数。

您可以使用此代码，将其放在 angular 加载之后，图表加载之前...

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);
    }
  })();
}

我是从这里拿来的：deep merge objects with AngularJS

angular-chartjs line chart TypeError: t.merge is not a function

angular-chartjs line chart TypeError: t.merge is not a function

javascript

angularjs

angularjs-directive

chart.js

angular-chart