javascript - Highcharts : point. 键太长导致图表变小

Question

我正在将 highcharts 与 jsf 结合使用，但我遇到了一个不知道如何解决的问题。

问题是 point.key 太长，它隐藏了图表本身，我需要保持相同的高度，我想做的是通过使用使 point.key 更小(例如 substring(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'
                                            }
                                        }
                                    } ]
                                });

如果有人可以提供帮助或有更好的想法，请不要犹豫，谢谢。

Answer 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'
                                            }
                                        }
                                    } ]
                                });