2016-06-27 2 views
0

У меня проблема с кодом jquery. в этом случае я использую библиотеку высокой диаграммы. когда код помещается на одну страницу, проблем не обнаружено. сценарий работает хорошо. как в этом изображениях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> 

пожалуйста, помогите мне. потому что это также происходит в другой библиотеке. Спасибо

+0

.. В чем проблема? Что вы ожидаете увидеть, и что вы на самом деле видите? Получаете ли вы какие-либо ошибки в консоли при запуске страницы? – Lee

+0

Где вы загружаете jquery? Что не выполняется? – Adjit

+0

удалите этот один $ (document.body) .ready (function() {} –

ответ

1

Возможно, вы хотите использовать Highcharts Adapter для AngularJS, а не для вызова Highcharts с помощью jQuery.

Вы всегда сталкиваетесь с проблемами при использовании jQuery вне AngularJS. В большинстве случаев jQuery не требуется в приложении AngularJS SPA.

+0

Спасибо за вашу рекомендацию. есть ли у вас аналогичная ссылка для бутстрапа daterangepicker и угловых js? причина, по которой daterangepicker не работает в моем SPA. –

+0

Да. Вместо использования файла Bootstrap.JS используйте собственные директивы angularJS Bootstrap: https://angular-ui.github.io/bootstrap/ – Martin

Смежные вопросы