Highcharts:point.key太长,使图表变小

时间:2016-03-17 17:36:56

标签: javascript highcharts jsf-2.2

我正在highcharts使用jsf而我正面临一个我不知道如何解决的问题。

问题是point.key太长了,它隐藏了自己的图表,我需要保持相同的高度,我想做的是通过使用({{1}例如)但同时我想要在工具提示标题中显示完整的substring(0.15)

这是我的问题的图像

enter image description here

这是我的代码:

point.key

如果有人能提供帮助或有更好的主意,请不要犹豫,谢谢。

1 个答案:

答案 0 :(得分:1)

谢谢@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 : {
                                        //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'
                                            }
                                        }
                                    } ]
                                });