Question

x轴标题对齐的默认行为在x轴的范围内。但是，图例对齐方式在整个图表的范围内。因此，如果对齐两个中心，它们会有轻微的偏移。我怎样才能使图例的位置偏离x轴边界？我的图表选项是动态的，所以我需要动态地进行。

$('#container').highcharts({
     legend: { margin:5, padding:0 },
     xAxis:{
         title:{ 
             text:'THIS IS MY X-AXIS TITLE',
             align:'middle',
         },
        categories:["A","B","C","D","E","F"]
     }
});

提前致谢！

Answer 1

您的示例：http://jsfiddle.net/xqag5e72/2/

简而言之，您可以将图例的翻译更改为类似于xAxis的标题：

function moveLegend(e) {
    var legend = this.legend,
        x = this.plotLeft + (this.xAxis[0].width / 2) - legend.group.getBBox().width / 2,
        y = legend.group.translateY;
    legend.group.attr({
        transform: 'translate(' + x + ',' + y +')' 
    });
}

注意：我正在使用load和redraw事件，在第一次初始化后翻译图例，然后使这个图例响应。

在HighCharts中将图例与x轴标题对齐

1 个答案: