如何在高图中包装图例项目 [英] How to wrap legend items in highcharts

问题描述

我使用highcharts存在一个大问题，因为如果它们非常长，我一直试图花费数小时来包装图例项目。我尝试设置图例和图例项目宽度，但我的文本仍然从图例中跳出。我发现的只是改变highcharts.src.js，但我认为这不是解决这个问题的方法。这里我的代码：

I have a big problem using highcharts, cause I have been trying for hours to wrap legend items if they very very long. I tryed to set legend and legend item width, but my text still get out from a legend. Only thing that I found is to change highcharts.src.js but I think that's not a way to solve this problem. Here my code:

<script type="text/javascript">
        var chart;
        $(document).ready(function() {
             chart = new Highcharts.Chart({
                chart: {
                renderTo: 'graph_container',
                    defaultSeriesType: 'line',
                    zoomType: 'y',
                     marginRight: 130,
                      marginBottom: ${marginBottom}
                },
                  title: {
                    x: -10, 
                    text: null
                 },
                  xAxis: {
            title: {
               text: '<fmt:message key="html.time" bundle="${msg}"/>',
                align: 'high'
             },
             categories: [${years}]
        },
            yAxis: {
                  title: {
                  text: '<fmt:message key="html.value" bundle="${msg}"/>',
                     align: 'high'
            },
            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                             }]
                          },
             tooltip: {
                style: {
                    fontSize: '9pt',
                    width: '400px',//,
                     wrap:'hard'                                
                            },
                formatter: function() {
                 return '<b>' + this.series.name + '<br>' +
                      + this.x +': '+ this.y + '</b>';
                }
            },
             legend: {
                layout: 'vertical',
                 width: 600,
                 floating: true,
                align: 'center',
                verticalAlign: 'bottom',
                 borderWidth: 1,
                  itemWidth: '500px'

             },
            credits: {
                    enabled: false
            },
                        exporting: {
                            enabled: false
                        },      
            series: [
             <c:forEach items="${graphValues}" var="value" varStatus="counter">
                    <c:if test="${counter.count != 1}">,</c:if>
                        {
                        name: '${value.name}',
                        data: ${value.jsonData}
                    }
            </c:forEach>
            ]
             });


                    });

    </script>   

推荐答案

编辑：实际上设置项目宽度确实有效，一个更好的解决方案。

Actually setting the item width did work, probably a better solution.

设置itemWidth对我不起作用，但是你可以这样做：

Setting the itemWidth doesn't work for me, however you can do something like this:

labelFormatter: function() {
    var words = this.name.split(/[\s]+/);
    var numWordsPerLine = 4;
    var str = [];

    for (var word in words) {
        if (word > 0 && word % numWordsPerLine == 0)
            str.push('<br>');

        str.push(words[word]);
    }

    return str.join(' ');
}

请参阅 http://jsfiddle.net/ArmRM/13520/ 为例。

这篇关于如何在高图中包装图例项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！