我正在使用 twitter-bootstrap 框架来实现它的一些功能,例如工具提示、提前输入和日期选择器。
我也在使用HighCharts
插件在同一页面上显示图表。
但两者之间似乎存在某种冲突。由于 HighCharts 代码,引导功能停止工作,并且我在控制台上收到与引导相关的错误:
TypeError: $("a[rel='tooltip']").tooltip is not a function
当我删除 HighCharts 代码时,引导功能就完美地出现了。
所以任何人都可以指导我解决这个问题。
我正在使用以下 js 文件: HighCharts
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" >
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'column'
},
title: {
text: 'Monthly Expenditure'
},
subtitle: {
text: ''
},
xAxis: {
categories: ['Months'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Expenditure',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' (local currency)';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: <?=json_encode($series);?>
});
});
});
</script>
引导程序
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">