我是HighCharts的新手，我很难用HighChart JS创建指令。我收到以下错误：
angular.min.js：38未捕获的错误：[$ 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
},
}]
});
})});
您没有加载highchart的js文件的Angular版本。根据您的文件路径 添加以下代码highchar-ng：
//make sure your highchart-ng.js is under the js direcotry
//or change accordingly
<script src="js/highchart-ng.js></script>
友善的建议：请使用非缩小版本的javascript文件，以便您可以清楚地看到错误日志。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句