Question

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

我在想这样的事情：

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

但是，对象图例没有属性Y.你能提供一些示例代码或给出一些提示吗？

我还想将图表标题与左Y轴标签对齐。如何获得宽度或属性＆＃34; left＆＃34;顶部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属性。可能导致您混淆的是，当您不使用floating:true并尝试在图的中间渲染图例时，highcharts将忽略y属性，因为它可能导致重叠。浮动图例时，此行为不适用。你可以看到这个例子：http://jsfiddle.net/axfahe5u/2/

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

对于图表标题，您可以简单地设置title对象的属性，如下所示：

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

你可以看到上面的小提琴用作参考。

为了在图表显示后再进行

这里我使用了一个在图表为rendred后立即调用的回调函数。您可以在任何其他电话中使用它。

$('#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/

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

2 个答案: