AngularJS和canvasJS问题

Question

我试图用angularJS制作一个简单的网站，这将涉及到图表的更新和更改取决于选择的数据。然而，当我尝试输入canvasJS时，我会得到错误。我看过如何使用canvasJS的例子，但仍然没有帮助。我是用饮水机生成这个应用的。我还使用gulp运行服务器。

当我尝试通过html标记输入脚本时，我会得到“CanvasJs未定义”。

相反，我使用以下方法下载了canvasJS：

npm安装canvasjs

这定义了CanvasJS，但现在我得到了

WARNING in ./~/canvasjs/src/core/charts.js
520:35-63 "export 'devicePixelBackingStoreRatio' was not found in '../helpers/utils'

WARNING in ./~/canvasjs/src/core/charts.js
520:99-127 "export 'devicePixelBackingStoreRatio' was not found in '../helpers/utils'

WARNING in ./~/canvasjs/src/core/charts.js
940:68-96 "export 'devicePixelBackingStoreRatio' was not found in '../helpers/utils'

WARNING in ./~/canvasjs/src/core/charts.js
940:125-153 "export 'devicePixelBackingStoreRatio' was not found in '../helpers/utils'

WARNING in webpack: Using NoErrorsPlugin is deprecated.
Use NoEmitOnErrorsPlugin instead.


ERROR in ./~/canvasjs/src/charts/index.js
Module parse failed: /Users/thermida/Documents/code/transactionTracker/moneytracker/node_modules/canvasjs/src/charts/index.js Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export SplineChart from '../charts/spline';
| export ColumnChart from '../charts/column';
| export StackedColumnChart from '../charts/stacked_column';
 @ ./~/canvasjs/src/core/charts.js 40:0-61:25
 @ ./~/canvasjs/src/main/index.js
 @ ./src/app/transactions/index.js
 @ ./src/index.js

index.js

var CanvasJS = require('canvasjs');

var angular = require('angular');

var transactions = require('./transactions');

var transactionsModule = 'transactions';
var transactionFormModule = require('../transactionForm/index');
var categoriesModule = require('./categories/index');
var transactionsService = require('./transactionsService');

module.exports = transactionsModule;

angular
  .module(transactionsModule, [transactionFormModule, categoriesModule, CanvasJS])
  .component('transactionsDisplay', transactions)
  .service('transactionsService', transactionsService);

transaction.js

module.exports = {
  template: require('./transactions.html'),
  controller: transactionsController
};

function transactionsController($http, $log, transactionsService, $scope, CanvasJS) {
  this.transactionsRecord = transactionsService;

  $http
    .get('app/transactions/transactions.json')
    .then(function (response) {
      transactionsService.transactions = response.data;
      findTotal();
    });

  var findTotal = function () {
    var total = 0;
    for (var txn = 0; txn < transactionsService.transactions.length; txn++) {
      total += transactionsService.transactions[txn].amount;
    }
    transactionsService.totalSpent = total;
  };

  this.removeTransaction = function (transaction) {
    var index = transactionsService.transactions.indexOf(transaction);
    if (index > -1) {
      transactionsService.transactions.splice(index, 1);
    }
    findTotal();
  };

  this.filterTransactions = function (transaction) {
    var state = false;
    if (transactionsService.filters.length <= 0) {
      state = true;
    } else if (transactionsService.filters.indexOf(transaction.category) !== -1) {
      state = true;
    }
    return state;
  };

  $scope.chart = new CanvasJS.Chart("chartContainer", {
    exportEnabled: true,

    theme: 'theme1',
    title: {
      text: "Nintendo Console Sales"
    },
    axisY: {
      title: "million units",
      labelFontSize: 16
    },
    axisX: {
      labelFontSize: 16
    },
    data: [
      {
        type: "bar",
        dataPoints: [
          {label: "Wii U", y: 6.17},
          {label: "Wii", y: 101.06},
          {label: "GameCube", y: 21.74},
          {label: "64", y: 32.93},
          {label: "SNES", y: 49.10},
          {label: "NES", y: 61.91},
          {label: "3DS", y: 43.33},
          {label: "DS", y: 153.99},
          {label: "Advance", y: 81.51},
          {label: "GameBoy", y: 118.69}
        ]
      }
    ]
  });

  $scope.chart.render();

  $scope.changeChartType = function (chartType) {
    $scope.chart.options.data[0].type = chartType;
    $scope.chart.render();
  };
}

(谢谢你的帮助:)

Answer 1

解决CanvasJs is not defined错误的一种更简单的方法是使用jQuery实现以下代码行：

$.getScript("http://canvasjs.com/assets/script/canvasjs.min.js", function() {

    $scope.chart = new CanvasJs..Chart("chartContainer", {
        // specify the parameters...
    });

    $scope.chart.render();
});

使用此解决方案，您不需要使用npm安装脚本。