javascript - 如何将图例的底部与X轴对齐？

我想将图例的底部与X轴对齐。

我在想这样的事情：

var legend= chart.legend;
var legend.Y= Chart.plotTop + Chart.plotHeight - legend.legendHeight;

但是，没有对象图例的属性Y。您能否提供一些示例代码或给出提示？

我还想将图表标题与左Y轴标签对齐。如何获得顶部y轴标签的宽度或属性“左侧”？

图表将由用户生成，他们应该可以根据需要设置图表的格式（例如，显示或隐藏轴类别标题）。因此，我不想使用固定值，因为一旦它可以正常工作，就一次不行。

谢谢

链接到图像：http://www.fotosik.pl/pokaz_obrazek/pelny/12dadc5d85228db9.html

最佳答案

已编辑

至于轴：
右标题很简单-向左移动10。
左比较难。您可以使用顶部刻度线（其x位置）和该刻度线的标签长度​​。

从图例对齐开始，您可以使用(chart.plotTop + chart.plotHeight - legend.legendHeight)下的示例所示的变量进行转换并获取图表的大小

示例：http://jsfiddle.net/0ur3L0pL/8/

$(function () {
    var primText = 'primary',
        secoText = 'secondary',
        hidden = $('<span id="hidden" style="display:none; ont-size:11px; "></span>');
    $('body').append(hidden);

    $('#container').highcharts({
        chart: {
            type: 'column',
            marginTop: 80
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -60 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: [{
            title: {
                text: primText,
                rotation: 0,
                align: 'high',
                y: -25
            }
        }, {
            title: {
                text: secoText,
                rotation: 0,
                align: 'high',
                y: -25
            },
            opposite: true
        }],
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5],
            pointWidth: 10
        }, {
            name: 'New York',
            data: [0.8, 5.7, 11.3, 17.0, 220.0, 24.8, 24.1, 20.1],
            pointWidth: 5,
            yAxis: 1
        }]
    },

    function (chart) {
        var legend = chart.legend,
            group = legend.group,
            x = group.translateX;

        group.translate(x, chart.plotTop + chart.plotHeight - legend.legendHeight);

        var ticks = chart.yAxis[0].ticks,
            pos = chart.yAxis[0].tickPositions,
            top = pos[pos.length - 1].toString(),
            topX = ticks[top].label.xy.x,
            topString = ticks[top].label.element.innerHTML;

        hidden.text(topString);

        chart.yAxis[0].update({
            title: {
                x: topX - hidden.width() - 8
            }
        });
        chart.yAxis[1].update({
            title: {
                x: -10
            }
        });

    });
});