Highcharts簡單使用

2021-06-09 12:34:55 字數 394 閱讀 3931

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

首先,第乙個非同步載入資料更新圖表。highcharts官方有提供這樣乙個demo,關鍵問題就是怎麼套用在自己的專案中了。

官方的例子是這個:

dynamic charts

spline updating each second

呈現如下圖:

chart.xaxis[0].categories.push(x);

如何在vue中使用highcharts

1 首先npm install s vue highcharts 2 在main.js中寫入全域性使用 import highcharts from highcharts import vuehighcharts from vue highcharts import highcharts3d fro...

HighCharts常用設定

看到社群裡有很多關於highcharts的問題,我做的時候也常來找答案,下面把前兩周的問題整理出來 1.x軸文字斜著放,在xaxis裡設定 1xaxis 6 2.柱形圖柱形的寬度和邊框,在plotoptions裡設定 1plotoptions 6 3.柱形圖柱子的顏色,可以統一設定,也可以分開設定,...

Highcharts基本用法

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