我的jquery代码有问题。在这种情况下,我使用库高图表。当代码放在一个页面时,没有发现问题。脚本运行良好。就像在这个图像
但那不是我想要的。在我的情况下,我使用单页应用程序。在制作单页应用程序时,我使用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 :(得分:1)
您可能希望使用AngularJS Highcharts Adapter而不是使用jQuery调用Highcharts。
你总是会在AngularJS之外使用jQuery遇到问题。在大多数情况下,AngularJS SPA应用程序中不需要jQuery。