Jquery在加载的页面

时间:2016-06-27 16:22:33

标签: javascript jquery html angularjs single-page-application

我的jquery代码有问题。在这种情况下,我使用库高图表。当代码放在一个页面时,没有发现问题。脚本运行良好。就像在这个图像

working well

但那不是我想要的。在我的情况下,我使用单页应用程序。在制作单页应用程序时,我使用Angular JS Library。罗。这是我的问题。 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>

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

1 个答案:

答案 0 :(得分:1)

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

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