这是我第一次使用 High Charts 库,很棒的东西。
无论如何,我面临一个奇怪的问题,我不明白其背后的原因或如何解决它。
当我在我的页面中显示一个图表时,一旦我在同一页面中添加更多图表,添加的图表有两个导出按钮,一切都很好。
这是我的JS代码:
$(function() {
Highcharts.setOptions({
colors : [ '#e74c3c', '#66b354', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
});
/* Pie Chart */
$('#pie-chart-1')
.highcharts(
{
chart : {
plotBackgroundColor : null,
plotBorderWidth : null,
plotShadow : false
},
title : {
text : '#{msg['DB_graph_title1']}'
},
tooltip : {
pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions : {
pie : {
allowPointSelect : true,
cursor : 'pointer',
dataLabels : {
enabled : true,
color : '#000000',
connectorColor : '#000000',
format : '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series : [ {
type : 'pie',
name : 'Etat',
data : [
//'#{msg['DB_graph_ND']}'
[ '#{msg['DB_graph_ND']}',
#{homeSupBean.nonDemarre} ],
[ '#{msg['DB_graph_CL']}',
#{homeSupBean.complete} ],
[ '#{msg['DB_graph_EC']}',
#{homeSupBean.enCours} ], ]
} ]
});
});
$(function() {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00', '#24CBE5',
'#64E572', '#FF9655', '#FFF263', '#6AF9C4' ]
});
$('#container-1')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title2']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.profils}" var="prfl">[
'#{prfl.profileName}',
#{homeSupBean.profilProg[prfl.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
});
$(function() {
try {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263',
'#6AF9C4' ]
});
$('#container-2')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.campagnes}" var="camp">[
'#{camp.name}',
#{homeSupBean.campagneProg[camp.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
} catch (e) {
alert(e.message);
}
});
$(function() {
try {
Highcharts.setOptions({
colors : [ '#95ceff', '#66b354', '#DDDF00',
'#24CBE5', '#64E572', '#FF9655', '#FFF263',
'#6AF9C4' ]
});
$('#container-3')
.highcharts(
{
chart : {
type : 'column'
},
title : {
text : '#{msg['DB_graph_title4']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : '#{msg['DB_graph_lib']} (%)'
}
},
legend : {
enabled : false
},
tooltip : {
pointFormat : '#{msg['DB_graph_lib']} : <b>{point.y:.1f} %</b>'
},
series : [ {
name : '#{msg['DB_graph_lib']}',
data : [
<ui:repeat value="#{homeSupBean.sectionsHC}" var="sect">[
'#{sect.name}',
#{homeSupBean.sectionProg[sect.id.toString()]}],
</ui:repeat> ],
dataLabels : {
enabled : true,
rotation : -90,
color : '#FFFFFF',
align : 'right',
format : '{point.y:.1f}', // one decimal
y : 10, // 10 pixels down from the top
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
} catch (e) {
alert(e.message);
}
});
我试过了:
exporting : {
buttons : {
contextButtons : {
enabled : false,
menuItems : null
}
},
enabled : true
},
但没有成功:(,如果有人可以提供帮助,请不要犹豫,谢谢。