Обтекание HighChart в AngularJS

Я новичок в HighCharts, и мне сложно создавать директиву из моего HighChart JS. Я получаю следующее сообщение об ошибке:Обтекание HighChart в AngularJS

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

Чтобы уточнить: возможно, в вашем проекте отсутствует другой файл. Вам нужно либо установить [highcharts-ng] (https://github.com/pablojim/highcharts -ng), используя «bower install highcharts-ng», либо предоставить ссылку на [основной код для highcharts-ng] (https : //github.com/pablojim/highcharts-ng/blob/master/dist/highcharts-ng.js) каким-то другим способом. [Plunkr, например, код] (http://plnkr.co/edit/kAs0GwMbT6m8s9AXukdD?p=preview) –

спасибо @CourtneyBReid для того, чтобы сделать ответ понятным! – CozyAzure

Обтекание HighChart в AngularJS

ответ

Смежные вопросы