如何在Highcharts中旋转图例? [英] How do I rotate the legend in Highcharts?
本文介绍了如何在Highcharts中旋转图例?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我不想在图的底部显示图例,而是要在旋转90度的y轴左侧显示它.我该怎么办?
Instead of showing the legend on the bottom under my chart, I want to show it to the left of the y axis, rotated 90 degrees. How do I do that?
推荐答案
您可以设置自定义图例:
You can set a custom legend:
$("#a1").click(function() {
$('.highcharts-legend-item:nth-child(1)').click();
$(this).toggleClass("leg-clicked");
});
在CSS中使用此属性旋转图例:
Use this property in CSS to rotate the legend:
-webkit-transform: rotate(90deg);
请检查以下示例:
$(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的图例:(否则,您将获得两个图例)
Be sure to deactivate Highcharts' legend in CSS:(otherwise, you will get two legends)
.highcharts-legend {
display: none;
}
这篇关于如何在Highcharts中旋转图例?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文