jquery 如何在Highcharts中更改图例位置?

gstyhher  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(143)

我正在为我的一个项目使用Highcharts API。
我需要在右边的传说和左边的图在下面的链接。有人知道如何在Highcharts中做到这一点吗?
提前感谢。
请检查此图像。


的数据

kx1ctssn

kx1ctssn1#

设置图例的布局、对齐和垂直对齐选项,如下所示:

legend: {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   itemMarginTop: 10,
   itemMarginBottom: 10
 },

字符串
通过itemMarginTop/Bottom,您可以控制图例项之间的填充。
示例:http://jsfiddle.net/ca8h5eqz/
x1c 0d1x的数据

x9ybnkn6

x9ybnkn62#

我试过网上所有的答案,但没有一个有效。我想改变的立场(变换)的传说,框,而水平模式

legend: {
        align: 'top',
        layout: 'horizontal',
        itemStyle: {'width': '100%'},
        verticalAlign: 'bottom',
        x: 0,
        y: 0,
    },

字符串
会是这样
尽管我所建议的唯一解决方案是在加载和重绘时更改Highchart的函数
为了达到这个目的,你需要在Highchart的初始化部分包含这个代码

chart: {
        renderTo: 'container',
        type: 'pie',
        events: {
            load: function() {
                legendsPosition(this)
            },
            redraw: function() {
                legendsPosition(this)
            }
        }
    },


legendsPosition函数代码为

var legendsPosition = function (chart) {
    var legends = chart.legend.group;
    var neededSpace = 40; //amount pixels you want to increase
    var newLegendsTranslateY = legends.alignAttr.translateY + neededSpace
    $(legends)[0].attr("transform", "translate(50," + newLegendsTranslateY + ")")
};


如果把它放在Highchart初始函数之前可能会更好

相关问题