Javascript highstock与jquery.ba-resize.js和jquery.flot.resize.js冲突
在对我的图表未加载的原因进行了数小时的疑难解答后，我发现在一个页面中同时使用jquery.ba-resize和jquery.flot.resize与highstock会导致以下错误：Javascript highstock与jquery.ba-resize.js和jquery.flot.resize.js冲突,javascript,jquery,jquery-ui,highcharts,highstock,Javascript,Jquery,Jquery Ui,Highcharts,Highstock,在对我的图表未加载的原因进行了数小时的疑难解答后，我发现在一个页面中同时使用jquery.ba-resize和jquery.flot.resize与highstock会导致以下错误： uncaught typeerror: cannot read property 'width' of undefined 目前我正在尝试将highstock的一个示例集成到我的页面中，可以在highstock演示中找到 你知道怎么解决这个问题吗？ 谢谢 edit2:jsfiddle: 实际代码： <ht
uncaught typeerror: cannot read property 'width' of undefined
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
$('#container').highcharts('StockChart', {
lang: {
rangeSelectorZoom: ''
},
chart: {
type: 'area'
},
legend: {
enabled: true,
borderRadius: 0,
layout: 'horizontal',
backgroundColor: null,
align: 'right',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 20
},
colors: [
'#71c49a',
'#444444',
'#777777',
'#910000',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: '#71c49a'
}]
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonSpacing: 5,
labelStyle: {
color: '#71c49a',
fontWeight: 'bold'
},
},
navigator: {
handles: {
backgroundColor: '#d8efe3',
borderColor: '#71c49a'
},
series: {
color: '#71c49a'
}
},
plotOptions: {
area: {
lineWidth: 3,
shadow: true,
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
symbol: 'circle',
radius: 3,
states: {
hover: {
enabled: true
}
}
}
},
series: {
compare: 'percent',
fillOpacity: 0.7
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
</head>
<body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="your-path/jquery.ba-resize.js"></script>
<script src="your-path/jquery.flot.resize.js" type="text/javascript"></script>
</body>
</html>
Highstock示例
$（函数（）{
var系列选项=[]，
yAxisOptions=[]，
序列计数器=0，
名称=['MSFT'、'AAPL'、'GOOG']，
colors=Highcharts.getOptions（）.colors；
$.each（名称、函数（i、名称）{
$.getJSON（'http://www.highcharts.com/samples/data/jsonp.php?filename=“+name.toLowerCase（）+”-c.json&callback=？”，函数（数据）{
系列选项[i]={
姓名:姓名,，
数据：数据
};
//当我们异步加载数据时，我们不知道数据的到达顺序
//我们保留一个计数器，并在加载所有数据时创建图表。
seriesconter++；
if（serieCounter==names.length）{
createChart（）；
}
});
});
//在加载所有数据时创建图表
函数createChart（）{
$（“#容器”）.highcharts（'StockChart'{
朗：{
rangeSelectorZoom:“”
},
图表：{
类型：“区域”
},
图例：{
启用：对，
边界半径：0，
布局：“水平”，
背景颜色：空，
对齐：“右”，
垂直排列：“顶部”，
浮动：是的，
边框宽度：0，
y:20
},
颜色：[
"71c49a",，
'#444444',
'#777777',
'#910000',
#1广告",，
'#492970',
"f28f43",，
"77a1e5",，
"c42525",，
"a6c96a"
],
出口：{
已启用：false
},
学分：{
已启用：false
},
xAxis：{
线条颜色：'#d8efe3'，
标签：{
风格：{
颜色：“#71c49a”
},
}
},
亚克斯：{
线条颜色：'#d8efe3'，
gridLineColor:“#d8efe3”，
标签：{
风格：{
颜色：“#71c49a”
},
格式化程序：函数（）{
返回（this.value>0？'+'：''）+this.value+'%；
}
},
绘图线：[{
值：0，
宽度：2，
颜色：“#71c49a”
}]
},
滚动条：{
已启用：false
},
范围选择器：{
选定：1，
输入：错误，
按钮位置：5，
标签样式：{
颜色：“#71c49a”，
fontWeight:“粗体”
},
},
导航器：{
处理：{
背景颜色：“#d8efe3”，
边框颜色：“#71c49a”
},
系列：{
颜色：“#71c49a”
}
},
打印选项：{
面积：{
线宽：3，
影子：没错，
标记：{
启用：对，
填充颜色：'#FFFFFF'，
线宽：2，
lineColor:null，
符号：'圆'，
半径：3，
国家：{
悬停：{
已启用：true
}
}
}
},
系列：{
比较：'百分比'，
填充不透明度：0.7
}
},
工具提示：{
pointFormat:“{series.name}:{point.y}（{point.change}%）
”，
数值小数：2
},
系列：系列选项
});
}
});
<script type="text/javascript" src="https://rawgithub.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>