highcharts - Highcharts 图例标题边框不是全宽

Question

我需要使用 Highcharts (v3.0.1) 的图例标题，但边框不会呈现到标题的长度。它是一个错误吗？我无法使用width，因为我正在使用layout: horizontal.

添加超过 1 个系列时没有问题，但如果您只有 1 个，则图例布局中会出现错误（视觉上）。

示例：http: //jsfiddle.net/3cSVr/1/

 $(function () {
    var chart;

     $(document).ready(function() {

         chart = new Highcharts.Chart({

             chart: {
                 renderTo: 'container',
                 type: 'line',
             },
             plotOptions: {},                
             title: {
                 text: 'Monthly Average Temperature',
                 x: -20 //center
             },
             subtitle: {
                 text: 'Source: WorldClimate.com',
                 x: -20
             },
             xAxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                     'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
             },
             yAxis: {
                 title: {
                     text: 'Temperature (°C)'
                 },
              plotLines: [{
                  value: 0,
                   width: 1,
                   color: '#808080'
               }]
             },   
             tooltip: {
                 formatter: function() {
                         return '<b>'+ this.series.name +'</b><br/>'+
                         this.x +': '+ this.y +'°C';
                 }
             },    
             legend: {
                 title: {
                     text: 'WorldClimate.com',
                     style: {
                         fontWeight: 'bold'
                     }
                 },
                 borderWidth: 2
             },               
             series: [{
                 name: 'Tokyo',
                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]                
             }
                     //Add more series;
             ]
         });
     });     
});

感谢帮助。

Answer 1

它看起来像一个错误，所以我在这里向我们的开发人员报告了它：https ://github.com/highslide-software/highcharts.com/issues/1717

Answer 2

我最近遇到了同样的问题，我是这样解决的：

function updateLegendBox(chart){
   //number of series
    if(chart.series.length == 1){
        var title =  $("g.highcharts-legend-title tspan")[0];
        var len = title.textContent.length * 8;
        var box = $("g.highcharts-legend rect")[0];
        box.setAttribute('width', len)
    }
}

例子

var chart = new Highcharts.Chart({...});
updateLegendBox(chart);

我希望它会有所帮助