如何在 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;
}

如何在 Highcharts 中旋转图例？

How do I rotate the legend in Highcharts?

javascript

highcharts

highstock