Question

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

添加超过1个系列时没有问题，但如果只有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

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

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);

我希望它会有所帮助

Answer 2

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

Highcharts传奇标题边框不是全宽

2 个答案: