下載Highcharts最新版本

實(shí)時(shí)繪制大量帶時(shí)間戳的數(shù)據(jù)往往是一項(xiàng)棘手的任務(wù)，需要相當(dāng)多的技巧和過多的耐心。幸運(yùn)的是，我們已經(jīng)有了InfluxData平臺(tái)來為我們提供開箱即用的許多困難。我們可以高效，安全地收集和存儲(chǔ)數(shù)據(jù)，構(gòu)建可視化，甚至設(shè)置警報(bào)。

本教程提供了一個(gè)簡(jiǎn)短的指南，通過Highcharts圖表庫可視化來自InfluxDB（專用時(shí)間序列數(shù)據(jù)存儲(chǔ)）的時(shí)間序列數(shù)據(jù)。

如您所見，這里發(fā)生了一些不同的事情。Highcharts庫附帶方法chart（），它接受兩個(gè)參數(shù)：用于呈現(xiàn)圖表的目標(biāo)元素和一個(gè)options對(duì)象，您可以在其中指定各種屬性，如樣式，標(biāo)題，圖例，系列，類型，plotOptions和等等。 讓我們來看看每個(gè)選項(xiàng)：

• colors：[array] - colors屬性接受十六進(jìn)制代碼數(shù)組，這些代碼表示圖表的默認(rèn)顏色方案。如果所有顏色都用完了，那么所需的任何新顏色都會(huì)導(dǎo)致陣列再次循環(huán)。
• chart：{object} - chart屬性接受具有各種附加屬性的對(duì)象，包括type，zoomtype，animation，events，description和許多樣式屬性。在這種情況下，我給出了背景線性漸變，并將類型指定為樣條曲線。
• title：{object} - 這表示圖表的主標(biāo)題，并且可以另外給出一個(gè)樣式對(duì)象來使某些事情變得更好。
• xAxis：{object} - 在這種情況下，因?yàn)槲艺谑褂脮r(shí)間序列數(shù)據(jù)，我知道x軸總是時(shí)間所以我可以將類型指定為'datetime'，并且比例將自動(dòng)調(diào)整到適當(dāng)?shù)臅r(shí)間單位。但是，這里還有許多其他選項(xiàng)，包括樣式，標(biāo)簽，自定義刻度位置，對(duì)數(shù)或線性類型。
• yAxis：{object} - 與xAxis屬性類似，y軸采用一個(gè)對(duì)象，并且可以訪問許多選項(xiàng)來自定義圖表y軸的設(shè)計(jì)和樣式。在這種情況下，我只指定了y軸標(biāo)題，并推遲到Highcharts自動(dòng)刻度位置。
• plotOptions：{object} - plotOptions屬性是每個(gè)系列類型的配置對(duì)象的包裝器對(duì)象。還可以為系列數(shù)組中給出的單個(gè)系列項(xiàng)覆蓋每個(gè)系列的配置對(duì)象。在這里，我使用了plotOptions.series屬性來覆蓋默認(rèn)的turboThreshold 1000并將其更改為2000.這允許繪制更多數(shù)據(jù)點(diǎn)（超過默認(rèn)值1000）。根據(jù)文檔，系列的conf選項(xiàng)可以在三個(gè)不同的級(jí)別訪問。如果要定位圖表中的所有系列，可以使用plotOptions.series對(duì)象。對(duì)于特定類型的系列，您將訪問該類型的plotOptions。例如，要將圖表類型為“line”的plotOptions定位，您將訪問plotOptions.line對(duì)象。最后，
• series：[array]或{object} - 這是您傳遞數(shù)據(jù)的地方。您還可以定義要傳入的數(shù)據(jù)的類型，為其命名，并為其定義其他plotOptions。

結(jié)果顯示在下面的圖表中：

結(jié)論

時(shí)間序列數(shù)據(jù)可以通過許多不同的方式可視化，以使可能性無窮無盡。這篇文章只展示了時(shí)間序列數(shù)據(jù)可視化的一個(gè)例子。

購買TeeChart Pro AciveX正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！