HighCharts常用設定

2021-06-20 05:25:38 字數 1547 閱讀 6227

看到社群裡有很多關於highcharts的問題,我做的時候也常來找答案,下面把前兩周的問題整理出來:

1. x軸文字斜著放,在xaxis裡設定

1xaxis:

6}

2. 柱形圖柱形的寬度和邊框, 

在plotoptions裡設定

1plotoptions:

6}

3.柱形圖柱子的顏色,可以統一設定,也可以分開設定, 

在series裡設定

01//統一設定,可以在highcharts.js裡設定預設值,也可以針對乙個柱形圖來設定

02series:

06

07//分開設定,每個柱子顏色不一樣,需要把顏色值存到資料庫裡

08series: [,

10,

11,

12,

13,

14,

15],

16}]

4.y軸的值不能為小數、且按固定數值來等分, 

在yaxis裡設定

1yaxis:

5.柱形圖每個y軸值顯示柱子上的位置, 

在series的datalabels裡設定

view source

print?

01//顯示在柱子的正上方

02series: [

09}]

10

11//顯示在柱子上

12//在上面基礎上再加乙個屬性,y:20,就是設定數值顯示的位置

6.圖例說明,預設顯示在下面,如果要顯示在右邊, 

1//整體即顯示在區域右邊中間

2legend:

Highcharts (2)常用設定

1.x軸文字斜著放,在xaxis裡設定 1xaxis 6 2.柱形圖柱形的寬度和邊框,在plotoptions裡設定 1plotoptions 6 3.柱形圖柱子的顏色,可以統一設定,也可以分開設定,在series裡設定 01 統一設定,可以在highcharts.js裡設定預設值,也可以針對乙個柱...

Highcharts簡單使用

最近需要做乙個用圖表來表示資料庫中的某個裝置的電量隨時間推移的圖表。沒錯,需求就是這麼簡單。共要做兩個圖表,第乙個實時狀態圖表,要先載入最新的20個狀態,然後定時取最新狀態來更新圖表。第二個相對簡單,就是取固定時間範圍的電量,在頁面上以圖表形式展示。首先,第乙個非同步載入資料更新圖表。highcha...

Highcharts基本用法

function title subtitle exporting yaxis 滑鼠旁邊的提示框的樣式 1.point.y 0f 提示框中顯示的y軸單位的小數點位數 2.style width 160px height 50px 提示框的寬高 3.point.key 座標的x軸的值 tooltip ...