highCharts在iframe中，鼠标滑过时，会一直闪动，解决方案：
1.看引用的js版本是否过低，可以引用jquery-1.8.2.min.js，highcharts.js
2.使用iframe单独嵌套一个页面，
//解决ie7,8下的兼容问题，直接调用窗口的父元素给需要的地方，不需要通过传参。
1.调用父窗口的元素，
queryArea(reportType,titleName,window.parent.xAxis,window.parent.yAxis,seizeName,unit); //错误的，里面不要穿参
queryArea(); //正确
2.
function queryArea(areaType,titleName,arr,dataArray,seizeName,unit) //错误，里面不要传参
function queryArea() //正确
3.
series: dataArray //错误
series:window.parent.dataArray //正确，直接调用窗口的父元素window.parent.dataArray
调用父窗口的参数，window.parent
<iframe id="areaChartIframe" frameborder="0px" autoheight="true" scrolling="no" style="height: 420px; width: 990px; border: 0;"></iframe>
$("#areaChartIframe").attr("src","areaTypeReportDemand.html");
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>企业类型图标</title>
<script type="text/javascript" src="../../../scripts/plugin/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../../scripts/plugin/highcharts.js"></script>
<script type="text/javascript">
var reportType = ''; //图标类型
$(function(){
var seizeName = 'def';
var unit = '单位(项)'; //y轴单位
var titleName = '企业需求统计';
reportType = 'column';
//调用父窗口的参数
queryArea(reportType,titleName,window.parent.xAxis,window.parent.yAxis,seizeName,unit);
});
function queryArea(areaType,titleName,arr,dataArray,seizeName,unit) {
$("#container").highcharts({
chart: {
height: 400,
backgroundColor: 'rgba(255, 255, 255, 0)',
type: areaType
},
title: {
text: titleName
},
colors:[
'#3180c2',
'#9481cf',
'#ff9547',
'#00a199',
'#f7b52b',
'#64E572',
],
navigation: {
buttonOptions: {
enabled:false
}
},
subtitle: {
text: null
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
xAxis: {
allowDecimals: true,
startOnTick: false,
categories:arr,
labels: {
formatter: function() {
return this.value; // clean, unformatted number for year
},
style: {
color: '#000',//颜色
fontSize:'14px' //字体
},
rotation: -45
},
lineWidth: 0,
tickLength:0,
tickmarkPlacement: 'on'
},
yAxis: {
min:0,
title: {
text:unit,
align:"high",
rotation:270
},
gridLineDashStyle: 'longdash'
},
tooltip: {
pointFormat: '<span style="font-size:14px;">共<b style="font-size:16px; color:red;">{point.y}</b>项</span>',
shadow: true
/* crosshairs:true,
shared:true */
/* {series.name} pointFormat: '{series.name} 是 <b>{point.y:,.0f}</b><br/>warheads in {point.x}' */
},
plotOptions: {
column:{
dataLabels: {
enabled: true,
format: '<span style="font-size:14px; color:#444;"><b style="font-size:16px; color:red;">{point.y}</b></span>',
inside: false
// format: '<div class="tip-inner tip-bg-image">共<b style="font-size:16px; color:red;">{point.y}</b>家</div><div class="tip-arrow tip-arrow-right" style="visibility: inherit;"></div>'
}
/* enableMouseTracking: false */
},
series: {
colorByPoint: true
}
},
series: dataArray
});
}
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
