javascript - Jquery 无法在加载的页面上工作

Question

我的 jquery 代码有问题。在这种情况下，我使用库高图表。当代码放入一页时，没有发现问题。脚本运行良好。就像这张图片中的那样

working well

但这不是我想要的。就我而言，我使用单页应用程序。在制作单页应用程序时，我使用 Angular JS 库。不。这是我的问题。 jquery 没有运行，因为我在运行页面时加载了页面。所以。当我单击另一个菜单时，内容会加载到另一个页面。

这是我用于使用高图表库的 jquery 脚本:

    $(function () {
var chart;
$(document.body).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container', //letakan grafik di div id container
            //Type grafik, anda bisa ganti menjadi area,bar,column dan bar
            type: 'line',  
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Pendapatan perkapita indonesia tahun 2006-2011',
            x: -20 //center
        },
        subtitle: {
            text: 'candra.web.id',
            x: -20
        },
        xAxis: { //X axis menampilkan data tahun 
            categories: ['2006', '2007', '2008','2009','2010','2011']
        },
        yAxis: {
            title: {  //label yAxis
                text: 'pendapatan dalam USD'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080' //warna dari grafik line
            }]
        },
        tooltip: { 
        //fungsi tooltip, ini opsional, kegunaan dari fungsi ini 
        //akan menampikan data di titik tertentu di grafik saat mouseover
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y ;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        //series adalah data yang akan dibuatkan grafiknya,
        //saat ini mungkin anda heran, buat apa label indonesia dikanan 
        //grafik, namun fungsi label ini sangat bermanfaat jika
        //kita menggambarkan dua atau lebih grafik dalam satu chart,
        //hah, emang bisa? ya jelas bisa dong, lihat tutorial selanjutnya 
        series: [{  
            name: 'Indonesia',  
            //data yang akan ditampilkan 
            data: [1660, 1946,2271,2590,3004,3550]
        }]
    });
});

});

为了调用该脚本，我在 html 中使用此代码:

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

请帮助我。因为这也发生在另一个图书馆。谢谢

Answer 1

您可能想使用 AngularJS Highcharts Adapter而不是使用 jQuery 调用 Highcharts。

在 AngularJS 之外使用 jQuery 总会遇到问题。在大多数情况下，AngularJS SPA 应用程序中不需要 jQuery。