如何在Highcharts中旋转图例？

Question

我不想在图表下方显示图例底部的图例，而是想将其显示在y轴左侧，旋转90度。我怎么做？

Answer 1

您可以设置自定义的传说：

$("#a1").click(function() { 
    $('.highcharts-legend-item:nth-child(1)').click(); 
    $(this).toggleClass("leg-clicked"); 
    }); 

使用这个属性在CSS旋转传说：

-webkit-transform: rotate(90deg); 

请检查以下example：

$(function() { 

    $("#a1").click(function() { 
    $('.highcharts-legend-item:nth-child(1)').click(); 
    $(this).toggleClass("leg-clicked"); 
    }); 

    $('#container').highcharts({ 

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

确保关闭CSS中的Highcharts图例：（否则，你会得到两个图例）

.highcharts-legend { 
    display: none; 
}