问题描述
我是HighCharts的新手,我试图确定为什么会出现此错误:
未捕获的异常:Highcharts错误#13:www.highcharts.com/errors/13
我相信我的Angular Directive和renderTo有一定的适用性。任何建议都会有帮助。
Angular.js
function get_chart(){
var options = {
chart:{
type:'column',
renderTo:'container'
},
title:{
text:'Twitter Data'
},
xAxis:{
categories:[]
},
plotOptions:{
series:{
stacking:'normal',
dataLabels:{
enabled:true,
style:{
textShadow: '0 0 3px black'
}
},点:{
events:{
click:function(){
alert('Category:'+ this。类别+',值:'+ this.y);
}
}
}
}
},
系列:[]
};
$ .getJSON(data.json,function(json){
options.xAxis.categories = json [0] ['data'];
options.series [0] = json [1];
options.series [1] = json [2];
chart = new Highcharts.Chart(options);
});
}
get_chart();
var app = angular.module('charts',[]);
app.directive('highchart',[function(){
return {
restrict:'E',
template:'< div>< / div>',
替换为:true,
link:函数(范围,元素,attrs){
$ b $ scope。$ watch(attrs.chart,function(){
if(!attrs.chart)return;
var chart = scope。$ eval(attrs.chart);
angular.element(element ).highcharts(chart);
});
}
}
}]);
函数Ctrl($ scope){
$ scope.example_chart = get_chart();
}
index.html
<!DOCTYPE html>
< html>
< head>
< title> AngularJS + Highcarts< / title>
< / head>
< body>
< section ng-app ='charts'>
< div ng-controller =Ctrl>
<高图表='example_chart'>< / highchart>
< / div>
< / section>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>
< script src =http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js>< / script>
< script src =http://code.highcharts.com/highcharts.js>< / script>
< script type =text / javascriptsrc =js / highChartStyle.js>< / script>
< script type =text / javascriptsrc =js / highChartAngular.js>< / script>
< / body>
< / html>
data.json
[
{
name:Month,
data:[
Jan,
Feb,
Mar,
Apr,
May,
Jun,
Jul,
Aug,
Sep,
Oct,
Nov,
Dec
]
},
[
{
name:Tweets Per,
data:[
21990,
22365,
21987,
22369,
22558 ,
22987,
23521,
23003,
22756,
23112,
22987,
22897
]
name:Revenue,
data:[
23987,
24784,
25899,
25569,
25897,
25668,
24114,
23899,
24987,
25111,
25899,
23221
]
请检查div是否与以下内容一致:[b
]
id容器存在于你的html中或不在
$ p $ lt; code> renderTo:'container'
在你的指令中,模板的div没有id。
尝试使用
template:'< div id =container>'
code>
I am new to HighCharts and I am trying determine why I am getting this error:uncaught exception: Highcharts error #13: www.highcharts.com/errors/13
I believe it has something to due with my Angular Directive and renderTo. Any suggestions would really help.
Angular.js
function get_chart() {
var options = {
chart: {
type: 'column',
renderTo:'container'
},
title: {
text: 'Twitter Data'
},
xAxis: {
categories: []
},
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
style: {
textShadow: '0 0 3px black'
}
}, point: {
events: {
click: function () {
alert('Category: ' + this.category + ', value: ' + this.y);
}
}
}
}
},
series: []
};
$.getJSON("data.json", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
}
get_chart();
var app = angular.module('charts', []);
app.directive('highchart', [function () {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(attrs.chart, function () {
if (!attrs.chart) return;
var chart = scope.$eval(attrs.chart);
angular.element(element).highcharts(chart);
});
}
}
}]);
function Ctrl($scope) {
$scope.example_chart = get_chart();
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS + Highcarts </title>
</head>
<body>
<section ng-app='charts'>
<div ng-controller="Ctrl">
<highchart chart='example_chart'></highchart>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="js/highChartStyle.js"></script>
<script type="text/javascript" src="js/highChartAngular.js"></script>
</body>
</html>
data.json
[
{
"name": "Month",
"data": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
]
},
[
{
"name": "Tweets Per ",
"data": [
21990,
22365,
21987,
22369,
22558,
22987,
23521,
23003,
22756,
23112,
22987,
22897
]
}
],
{
"name": "Revenue",
"data": [
23987,
24784,
25899,
25569,
25897,
25668,
24114,
23899,
24987,
25111,
25899,
23221
]
}
]
check if the div with id container is present in your html or not
renderTo:'container'
in your directive , the template has div without id.try using
template: '<div id="container">'
这篇关于Highcharts错误#13和AngularJs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!