高图未加载

Question

我正在尝试在我的网站中添加图表。 但是我收到这个奇怪的错误TypeError: $(...).highcharts is not a function这是我的代码

@scripts = {<script src="@routes.Assets.at("javascripts/tracknplan.js")" type="text/javascript"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script><script type="text/javascript"> var user = '';</script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>}


<article class="app-content container-fluid" ng-app="tracknplanApp">


<section ng-controller="tracknplanctrl" ng-init="measurementPageInit()">
    <div class="row">
        <ol class="breadcrumb col-md-6">
            <li><a href="#" class="orange">Home</a></li>
            <li><a href="#" class="orange">Track and Plan</a></li>
            <li class="active">Measurement</li>
        </ol>
        <!-- <div class="col-md-6" id="calender-container">
            <div class="input-daterange input-group" id="datepicker2">
            <input class="form-control" size="16" type="text" ng-model="activityDate" ng-change="activityDateChanged()" value="" >
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            </div>  
        </div> -->
    </div>
    <div class="row tracknplan track_n_plan noborder">      
    <!-- <div class="wrapper"> -->  

    <!-- </div> -->
    <div id="container"  style="min-width: 310px; height: 400px; margin: 0 auto"></div>


    </div>
    </section>
    <!--End of Track and plan-->
</article>

高图的初始化函数是：

$scope.measurementPageInit = function(){

    console.log("measurement template loading");
    /*$scope.val1 =10;
    angular.element("#templt").load("/partials/temp1");*/
    //angular.element("#graph,#collapse-graph #graph").html('<div id="chart1" style="margin-top:20px; margin-left:20px;"></div>');
    var data =[[1444780800,6],[1444867200,7],[1444953600,8]];
     $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    }
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: data
        }]
    });


};

我搜索了该错误，结果显示我应该在已经完成的海图之前添加jQuery CDN，您可以用此代码找到任何其他错误吗？

Answer 1

您错过了jQuery，将您的代码包装在下面

 $(function(){ // put highcharts code here });

似乎您正在使用angularJS，如果您在$ scope.someFunction中调用此方法，请定义如下所示的变量

var myChart = new Highcharts.Chart( { //put your code of chart config
                   });