在AngularJS中包裝HighChart

我是HighCharts的新手，我很難從HighChart JS創建一個指令。我收到以下錯誤：在AngularJS中包裝HighChart

angular.min.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/ $injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.7%2Fangular.min.js%3A19%3A463)

這裏是我的代碼

https://jsfiddle.net/y5va00xt/

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
</head> 
<body> 
<!--<div id="container" style="max-width: 400px; height: 400px; margin: 0 auto"></div>--> 
<div ng-app="myapp"> 
    <div ng-controller="myctrl"> 


     <highchart id="chart1" config="chartConfig"></highchart> 
    </div> 
</div> 
</body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="js/highChartStyle.js"></script> 
<script src="js/barChartHighChart.js"></script> 
</html>

highChartStyle.js

Highcharts.theme = { 
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', 
     '#FF9655', '#FFF263', '#6AF9C4'], 
    chart: { 
     backgroundColor: { 
      linearGradient: [0, 0, 500, 500], 
      stops: [ 
       [0, 'rgb(0, 0, 0)'], 
       [1, 'rgb(0, 0, 0)'] 
      ] 
     }, 
    }, 
    title: { 
     style: { 
      color: '#FFF', 
      font: 'bold 16px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    subtitle: { 
     style: { 
      color: '#FFF', 
      font: 'bold 12px "Trebuchet MS", Verdana, sans-serif' 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 

    legend: { 
     itemStyle: { 
      font: '9pt Trebuchet MS, Verdana, sans-serif', 
      color: 'FFF' 
     }, 
     itemHoverStyle:{ 
      color: 'FFFFFF' 
     } 
    } 
}; 

// Apply the theme 
Highcharts.setOptions(Highcharts.theme);

個

barChartHighChart.js

var myapp = angular.module('myapp', ["highcharts-ng"]); 
myapp.controller('myctrl', function ($scope) { 
$(function() { 

    var today = new Date(); 
    var dd = today.getDate(); 
    var mm = today.getMonth()+1; //January is 0! 

    var yyyy = today.getFullYear(); 
    if(dd<10){ 
     dd='0'+dd 
    } 
    if(mm<10){ 
     mm='0'+mm 
    } 
    var today = mm+'/'+dd+'/'+yyyy; 
    //var lastWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7) 

    $('#container').highcharts({ 
     title: { 
      text: 'Twitter Data' 
     }, 

     xAxis: { 
      categories: [today] 
     }, 
     labels: { 
      items: [{ 
       html: 'Total tweets by day', 
       style: { 
        left: '50px', 
        top: '5px', 
        color: (Highcharts.darktheme && Highcharts.theme.textColor) || '#FFF' 
       } 
      }] 
     }, 
     series: [{ 
      type: 'column', 
      name: 'Tweets', 
      data: [1113, 2000, 1987, 345, 4444, 576] 
     }, { 
      type: 'spline', 
      name: 'Total', 
      data: [1113, 2000, 1987, 345, 4444, 576], 
      marker: { 
       lineWidth: 2, 
       lineColor: Highcharts.getOptions().colors[3], 
       fillColor: 'white' 
      } 
     }, { 
      type: '', 
      name: 'Total Tweets', 
      data: [{ 
       name: 'Chart for week', 
       y: 13, 
       color: Highcharts.getOptions().colors[0] // Jane's color 
      }, 

      ], 
      center: [100, 80], 
      size: 100, 
      showInLegend: false, 
      dataLabels: { 
       enabled: false 
      }, 

     }] 
    }); 
})});

來源

2015-10-02 user2402107

你沒有加載的highchart的js文件的角度版本。根據您的文件路徑來highchar-ng加入這一行代碼：

//make sure your highchart-ng.js is under the js direcotry 
//or change accordingly 
<script src="js/highchart-ng.js></script>

友好的建議：不要使用JavaScript文件非精縮版，這樣你可以清楚地看到錯誤日誌。

來源

2015-10-02 15:46:35 CozyAzure

這並沒有改變任何東西。我已附加更新的jfiddle以顯示。 https://jsfiddle.net/y5va00xt/1/ – user2402107

爲了幫助澄清：您的項目中可能還有另一個文件丟失。你需要使用'bower install highcharts-ng'來安裝[安裝highcharts-ng]（https://github.com/pablojim/highcharts-ng），或者提供[highcharts-ng的主代碼]參考（https ：//github.com/pablojim/highcharts-ng/blob/master/dist/highcharts-ng.js）以其他方式。 [普倫克例如代碼]（http://plnkr.co/edit/kAs0GwMbT6m8s9AXukdD?p=preview） –

感謝@CourtneyBReid讓答案更清晰！ – CozyAzure

在AngularJS中包裝HighChart

回答

相關問題