我正在使用highCharts，并在fancybox中创建一个highChart。我想在highCharts中关闭动画。但是当我设置'animation：false'时，图表中的条形消失
我不知道问题是什么我尝试了很多东西，如果我创建没有fancybox的highChart它创建好，但fancybox是要求。下面是我的代码createHighChart（）函数从用户在页面上设置的设置创建HighChart。
$.fancybox.open({
'href' : '#container',
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
prevEffect : 'none',
nextEffect : 'none',
afterShow: function(){
for(var i=0; i<10000; i++);
createHighChart();
$("#container").show();
}
});
和createHighChart函数：
function createHighChart() {
var xData = getXdata();
var yAxisData = getYAxisData();
var t = getInt("threshold_id");
var type = getType();
var backColors = getBackgroundColor();
var isAreaOrLineChart = false;
var customColors = false;
var customPlotOptions = Highcharts.getOptions().plotOptions;
/*uncomment following two lines to provide your custom
* colors (an array of colors) for the bars in bar chart*/
/*customColors = true;
customPlotOptions.column.colors = customPlotOptions.bar.colors =
['#FF0000', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572'];*/
/***************************change font style****************************/
/*Highcharts.setOptions({
chart: {
style: {
fontSize: '25px',
fontWeight: 'bold',
fontFamily: 'serif',
}
}
});*/
if(type == "pie") {
createPieChart();
return;
}
if(type == "line" || type == "area") {
isAreaOrLineChart = true;
}
/******************Bar chart specific settings************************/
var barColor = getStr("barcolor_id");
var isMultiColor = false;
if(barColor == "multicolor") {
barColor = null;
isMultiColor = true;
}
else if(barColor == "") {
barColor = null;
}
if(isStacking() == "normal"){
barColor = isMultiColor = null;
}
var isGrouping = true;
if(getStr("barlayout_id") == "overlap") {
isGrouping = false;
barColor = isMultiColor = null;
}
/******************Line chart specific settings************************/
var thickLine = 2;
if(isCheckBoxEnabled("thickline_id")){
thickLine = 5;
}
/*if(isCheckBoxEnabled("show3d_id")) {
loadjsfile();
}
else {
$("#scripto").remove();
//removejsfile();
}
*/
/*******************Creates the bar chart************************/
var chart = new Highcharts.Chart({
chart : {
//backgroundColor: getStr("chrtbkgndcolor_id"),
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, backColors[0]],
[1, backColors[1]]
]
},
renderTo : 'container',
type : type,
margin: 75,
//animation: false,
options3d: {
enabled: isCheckBoxEnabled("show3d_id") && !isAreaOrLineChart,
alpha: 10,
beta: 10,
depth: 50,
viewDistance: 25
},
borderColor: '#A9A9A9',
borderRadius: isRoundCorner(),
borderWidth: isBorder(),
width: getInt("width_id"),
height: getInt("height_id")
},
title : {
text : getStr("title_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
subtitle: {
text: getStr("subtitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
tooltip: {
enabled: isCheckBoxEnabled("tooltip_id")
},
credits: {
text: getStr("source_id"),
href: '#'
},
legend: {
enabled: isCheckBoxEnabled("legend_id"),
},
xAxis : {
title:{
text: getStr("xtitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
categories : xData,
labels: {
rotation: getRotation(),
style: {
fontWeight: getFontWeight("fonttypelabel_id"),
fontStyle: getFontStyle("fonttypelabel_id")
}
},
/*below two lines are for x-axis line, it is not working
* due to inclusion of the 3D charts library
* (namely this line:
* <script src="http://code.highcharts.com/highcharts-3d.js"></script>)
* in the include/ChartGoLiteJSFiles.jsp */
lineWidth: 1,
lineColor: '#FF0000',
gridLineWidth: false
},
yAxis :
{
//lineWidth: 20,
min: getMinMaxY("min_yaxis_id"),
max: getMinMaxY("max_yaxis_id"),
plotLines: [{
color: '#FF0000',
width: 2,
value: t,
dashStyle: 'shortdash',
id: 'plotline-1'
}],
title : {
text : getStr("ytitle_id"),
style: {
fontWeight: getFontWeight("fonttypetitle_id"),
fontStyle: getFontStyle("fonttypetitle_id")
}
},
labels: {
style: {
fontWeight: getFontWeight("fonttypelabel_id"),
fontStyle: getFontStyle("fonttypelabel_id")
}
},
/*below two lines are for x-axis line, it is not working
* due to inclusion of the 3D charts library
* (namely this line:
* <script src="http://code.highcharts.com/highcharts-3d.js"></script>)
* in the include/ChartGoLiteJSFiles.jsp */
lineWidth: 1,
lineColor: '#FF0000',
gridLineColor: '#197F07',
gridLineWidth: isCheckBoxEnabled("gridlines_id")
},
plotOptions: {
series: {
animation: false,//this is not working right
shadow: isShadow(),
color: barColor,
//colorByPoint: isMultiColor || customColors,
stacking: isStacking(),
marker: {
enabled: isCheckBoxEnabled("shape_id")
},
lineWidth: thickLine
},
column: {
//animation: false,
colorByPoint: isMultiColor || customColors,
depth: 25,
grouping: isGrouping
},
bar: {
colorByPoint: isMultiColor || customColors,
},
},
series : yAxisData
});
chart.container.onclick = isCheckBoxEnabled("mouse_interaction_id");
if(t == 0)
chart.yAxis[0].removePlotLine('plotline-1');
}