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

Question

我想将图例的底部与 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

Answer 1

已编辑

至于轴:右标题很简单——向左移动 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
            }
        });

    });
});