Javascript Highcharts:point.key太长，使图表变小
我正在将Javascript Highcharts:point.key太长，使图表变小,javascript,highcharts,jsf-2.2,Javascript,Highcharts,Jsf 2.2,我正在将highcharts与jsf一起使用，我面临着一个我不知道如何解决的问题 问题是，point.key太长，它会隐藏图表本身，我需要保持相同的高度，我要做的是使用（substring（0.15））使point.key变小，但同时我希望完整的point.key显示在工具提示标题中 这是我的问题的图像 : 这是我的代码： $('#container-2') .highcharts(
highchartsjsfpoint.keysubstring（0.15）point.key$('#container-2')
.highcharts(
{
lang : {
printChart : '#{msg['DB_graph_lib1']}',
downloadPNG : '#{msg['DB_graph_lib2']}',
downloadJPEG : '#{msg['DB_graph_lib3']}',
downloadPDF : '#{msg['DB_graph_lib4']}',
downloadSVG : '#{msg['DB_graph_lib5']}',
contextButtonTitle : 'Context menu'
},
chart : {
type : 'column'
},
colors : [ '#808080' ],
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
max : 100,
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}',
y : 10,
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
$('#container-2')
.highcharts(
{
lang : {
printChart : '#{msg['DB_graph_lib1']}',
downloadPNG : '#{msg['DB_graph_lib2']}',
downloadJPEG : '#{msg['DB_graph_lib3']}',
downloadPDF : '#{msg['DB_graph_lib4']}',
downloadSVG : '#{msg['DB_graph_lib5']}',
contextButtonTitle : 'Context menu'
},
chart : {
type : 'column'
},
colors : [ '#808080' ],
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : '',
},
xAxis : {
//here is the solution
categories: [
<ui:repeat value="#{homeSupBean.campagnes}" var="camp">
['<h:outputText value="#{camp.name.substring(0,5)} ..." />'],
</ui:repeat>
],
//Solution ends here
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
max : 100,
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}',
y : 10,
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
$（“#容器-2”）
.海图(
{
朗：{
打印图表：“#{msg['DB_graph_lib1']}”，
下载PNG:“#{msg['DB_graph_lib2']}”，
下载JPEG:“#{msg['DB_graph_lib3']}”，
下载PDF:“#{msg['DB_graph_lib4']}”，
下载SVG:“#{msg['DB_graph_lib5']}”，
ContextButtontile:“上下文菜单”
},
图表：{
类型：“列”
},
颜色：['#808080']，
标题：{
正文：“#{msg['DB_graph_title3']}”
},
副标题:{
文本：“”
},
xAxis：{
类型：'类别'，
标签：{
轮调：-45，
风格：{
fontSize:'13px'，
fontFamily:“Verdana，无衬线”
}
}
},
亚克斯：{
最高：100，
分:0,，
标题：{
文本：“#{msg['DB_graph_lib']}（%）”
}
},
图例：{
已启用：false
},
工具提示：{
点格式：'#{msg['DB_graph_lib']}:{point.y:.1f}%'
},
系列：[{
名称：“#{msg['DB_graph_lib']}”，
数据：[
[
“#{camp.name}”，
#{homeSupBean.campagneProg[camp.id.toString（）]}，
],
数据标签：{
启用：对，
轮换：-90，
颜色：“#FFFFFF”，
对齐：“右”，
格式：“{point.y:.1f}”，
y:10，
风格：{
fontSize:'15px'，
fontFamily:“Verdana，无衬线”
}
}
} ]
});
如果有人能提供帮助或有更好的想法，请不要犹豫，谢谢。谢谢您@Pawel Fus先生，我找到了一个类似于您建议的解决方案 它是在xAxis{}中添加Categorie，并将我的逻辑放入其中，结果很好 这是我的密码：
$('#container-2')
.highcharts(
{
lang : {
printChart : '#{msg['DB_graph_lib1']}',
downloadPNG : '#{msg['DB_graph_lib2']}',
downloadJPEG : '#{msg['DB_graph_lib3']}',
downloadPDF : '#{msg['DB_graph_lib4']}',
downloadSVG : '#{msg['DB_graph_lib5']}',
contextButtonTitle : 'Context menu'
},
chart : {
type : 'column'
},
colors : [ '#808080' ],
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : ''
},
xAxis : {
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
max : 100,
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}',
y : 10,
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
$('#container-2')
.highcharts(
{
lang : {
printChart : '#{msg['DB_graph_lib1']}',
downloadPNG : '#{msg['DB_graph_lib2']}',
downloadJPEG : '#{msg['DB_graph_lib3']}',
downloadPDF : '#{msg['DB_graph_lib4']}',
downloadSVG : '#{msg['DB_graph_lib5']}',
contextButtonTitle : 'Context menu'
},
chart : {
type : 'column'
},
colors : [ '#808080' ],
title : {
text : '#{msg['DB_graph_title3']}'
},
subtitle : {
text : '',
},
xAxis : {
//here is the solution
categories: [
<ui:repeat value="#{homeSupBean.campagnes}" var="camp">
['<h:outputText value="#{camp.name.substring(0,5)} ..." />'],
</ui:repeat>
],
//Solution ends here
type : 'category',
labels : {
rotation : -45,
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
max : 100,
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}',
y : 10,
style : {
fontSize : '15px',
fontFamily : 'Verdana, sans-serif'
}
}
} ]
});
$（“#容器-2”）
.海图(
{
朗：{
打印图表：“#{msg['DB_graph_lib1']}”，
下载PNG:“#{msg['DB_graph_lib2']}”，
下载JPEG:“#{msg['DB_graph_lib3']}”，
下载PDF:“#{msg['DB_graph_lib4']}”，
下载SVG:“#{msg['DB_graph_lib5']}”，
ContextButtontile:“上下文菜单”
},
图表：{
类型：“列”
},
颜色：['#808080']，
标题：{
正文：“#{msg['DB_graph_title3']}”
},
副标题:{
文本：“”，
},
xAxis：{
//这是解决办法
类别：[
[''],