下載Highcharts最新版本

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

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

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

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

結果顯示在下面的圖表中：

結論

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

購買TeeChart Pro AciveX正版授權，請點擊“”喲！