HighCharts經常使用設置

1. X軸文字斜着放，在xAxis裏設置

 

xAxis: {
                labels: {
                    rotation: -90   //豎直放
                    rotation: -45   //45度傾斜
                }
            }

2. 柱形圖柱形的寬度和邊框， 在plotOptions裏設置 

 

 

plotOptions: {
    column: {
                pointWidth: 30,     //設置柱形的寬度 
        borderWidth: 0      //設置柱子的邊框，默認是1
    }
}

3.柱形圖柱子的顏色，能夠統一設置，也能夠分開設置， 在series裏設置

 

 

<span style="color:#E53333;"></span>//統一設置，能夠在highcharts.js裏設置默認值，也能夠針對一個柱形圖來設置
series: [{
    color:'#f00',   //柱形圖顏色統一設爲紅色
    data:[11,12,13,14,15,16,17]
}]
 
//分開設置，每一個柱子顏色不同，須要把顏色值存到數據庫裏
series: [{
                data: [{'color':'#F6BD0F','y':11},
                            {'color':'#AFD8F8','y':12},
                            {'color':'#8BBA00','y':13},
                            {'color':'#FF8E46','y':14},
                            {'color':'#008E8E','y':15},
                            {'color':'#D64646','y':16},
                            {'color':'#8E468E','y':17}], 
            }]

4.Y軸的值不能爲小數、且按固定數值來等分， 在yAxis裏設置 

 

yAxis: { 
    min: 0,                  //不顯示負數 
    allowDecimals:false,     //不顯示小數
    tickInterval: 1         //Y軸值按1來等分
}

5.柱形圖每一個Y軸值顯示柱子上的位置， 在series的dataLabels裏設置 

 

 

//顯示在柱子的正上方
series: [{
    data:[11,12,13,14,15,16,17],
    dataLabels: {
        enabled: true,    //默認是false，即默認不顯示數值
        color: '#666',    //字體顏色
        align: 'center'   //居柱子中間
   }
}]
 
//顯示在柱子上
//在上面基礎上再加一個屬性，y:20，就是設置數值顯示的位置

6.圖例說明，默認顯示在下面，若是要顯示在右邊，

 

 

//總體即顯示在區域右邊中間
legend: {
    layout:'vertical',         //豎直顯示，默認是水平顯示的
    align: 'right',            //圖例說明在區域的右邊，默認在中間
    verticalAlign: 'middle'    //豎直方向居中，默認在底部
}