下載Highcharts最新版本

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

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

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

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

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

結(jié)論

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

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