Highcharts 错误 #13 和 AngularJs答案

【问题标题】：Highcharts error #13 and AngularJsHighcharts 错误 #13 和 AngularJs
【发布时间】：2015-10-06 13:12:52
【问题描述】：

我是 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'
                    }
                }, 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>

数据.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
    ]
  }
]

【问题讨论】：

标签： javascript jquery json angularjs highcharts

【解决方案1】：

检查带有 id 容器的 div 是否存在于您的 html 中

 renderTo:'container'

在你的指令中，模板有没有 id 的 div。尝试使用

 template: '<div id="container">'

【讨论】：

你知道x轴分类样式的功能吗
如果您想为 xAxis 标签添加样式，请尝试 xAxis: { labels: { style: { color: 'red' }} 看到这个小提琴jsfiddle.net/Nishith/nqdapxgg/8