AngularJS和canvasJS問題

Question

我正在嘗試使用angularJS創建一個簡單的網站，這將涉及到根據所選數據更新和更改圖表。但是，當我嘗試和輸入canvasJS我得到錯誤。我看了一個如何使用canvasJS的例子，但它仍然沒有幫助。我使用fountainjs生成應用程序。我也在使用gulp來運行服務器。

當我嘗試通過html標籤輸入腳本時，我得到'CanvasJs is not defined'。

相反，我下載使用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安裝腳本。