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軸的間隔
},
2、結果圖如下:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM