如何將圖例的底部與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
            }
        });

    });
});

Answer 2

實際上，圖例有一個y屬性。 可能引起您困惑的事實是，當您不使用float floating:true並嘗試在圖的中間渲染圖例時，highcharts將忽略y屬性，因為它可能導致重疊。 當浮動圖例時，此行為不適用。 您可以看到以下示例： http : //jsfiddle.net/axfahe5u/2/

    legend: {
        align: 'center',
        floating:true,
        verticalAlign: 'bottom',
        y: -15
    },

對於圖表標題，您可以簡單地設置title對象的屬性，如下所示：

     title:{
         align:'left',
         x:-10
    },

您可以查看上面的小提琴以獲取用法參考。

為了做到這一點后，圖表被撕毀

在這里，我使用了一個回調函數，該函數在圖表還原后立即被調用。 您可以在其他任何呼叫中以不同方式使用它。

$('#container').highcharts({
    chart:{
        marginLeft:170,  
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
            legend: {
                verticalAlign: 'bottom',


                floating:true,
            },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

}, function(){
                //legend
                var legend = $('#container .highcharts-legend');
                var x = legend.position().left;
                var y = legend.position().top - 20;
                legend.attr({
                    transform: 'translate(' + x + ',' + y + ')'
                });
                //title
                var title = $('#container .highcharts-title');
                x = title.position().left-690;
                y = title.position().top;
                title.attr({
                    transform: 'translate(' + x + ',' + y + ')'
                });
});

小提琴： http ： //jsfiddle.net/LLExL/3601/