Question

highcharts图表的图例legend怎么改变显示位置

Answer 1

这里将针对highcharts图表组件内的图例legend展开讲述，图例的显示位置调整，亮瞎你的双眼！
一、将图例Legend放于图表右侧
1、设置chart的marginRight属性值

chart: {
           marginRight: 120
       },

2、设置legend图例属性值如下

      legend: {
           align: 'right', //水平方向位置
           verticalAlign: 'top', //垂直方向位置
           x: 0, //距离x轴的距离
           y: 100 //距离Y轴的距离
       },

3、效果图如下：

二、将图例放于图表左上角
1、设置legend的属性

      legend: {
           align: 'left', //水平方向位置
           verticalAlign: 'top', //垂直方向位置
           x: 0, //距离x轴的距离
           y: 0 //距离Y轴的距离
       },

2、效果图如下：

三、将图例放于图表上方中央
1、设置legend属性如下

legend: {
           align: 'center', //水平方向位置
           verticalAlign: 'top', //垂直方向位置
           x: 0, //距离x轴的距离
           y: 20 //距离Y轴的距离
       },

2、效果图如下：

四、将图例放于下方中央
1、设置legend属性如下

legend: {
           align: 'center', //水平方向位置
           verticalAlign: 'bottom', //垂直方向位置
           x: 0, //距离x轴的距离
           y: 0 //距离Y轴的距离
       },

转载，仅供参考。