Highcharts错误＃13和AngularJs [英] Highcharts error #13 and AngularJs

问题描述

我是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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！