Question

我是HighCharts的新手，我很难用我的HighChart JS创建一个指令。我收到以下错误：

angular.min.js：38未捕获错误：[$ injector：modulerr] http://errors.angularjs.org/1.4.7/ $ injector / modulerr？p0 = myapp＆amp; p1 =错误％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
            },

        }]
    });
})});

Answer 1

您没有加载Angchart版本的highchart的js文件。根据 file-path-to highchar-ng添加以下代码行：

//make sure your highchart-ng.js is under the js direcotry
//or change accordingly
<script src="js/highchart-ng.js></script>

友情提示：请使用非缩小版本的javascript文件，以便您可以清楚地看到错误日志。

在AngularJS中包装HighChart

1 个答案: