Question

我正在尝试将highcharts包含到我的网站中。但我得到了这个奇怪的错误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>

高图的init函数是：

$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
                   });

Highchart没有加载

1 个答案: