Highcharts是一款純JavaScript編寫的圖表庫，為你的Web網站、Web應用程序提供直觀、交互式圖表。當前支持折線、曲線、區域、區域曲線圖、柱形圖、條形圖、餅圖、散點圖、角度測量圖、區域排列圖、區域曲線排列圖、柱形排列圖、極坐標圖等幾十種圖表類型。

Highcharts現已更新至最新版本7.2.0，新版本添加了新的頂級選項-說明；幾乎所有系列都增加了對多個色軸的支持；增加了高對比度光和高對比度 - 黑暗主題，與背景形成3：1對比度并修復了一些之前存在的BUG，趕快下載試用吧~

點擊下載Highcharts最新版

如果您正在尋找基于Web的工具來切片，切塊和分析數據以及可視化這些數據，那么組合Highcharts和WebDataRocks中的免費數據透視表工具可能正是您所尋找的。

它們共同允許您生成功能強大的基于Web的儀表板，可以滿足多用途分析和報告需求，并與任何項目集成。
有了這種方法，您和您的用戶將能夠比以前更快更快地（并且更有可能，更便宜）提出數據驅動的決策。

為何選擇儀表板

許多儀表板僅用于報告數據。但是，一旦將數據操作和可視化相結合，分析就會變得更加復雜。

不需要昂貴的BI（商業智能）。您只需要WebDataRocks Pivot Table和Highcharts。以下是它們如何協同工作：

通過將原始數據作為輸入，數據透視表將其轉換為可理解的表格報告。在我們的例子中，這也為Highcharts圖表引擎準備數據，以便您可以直觀地瀏覽數據。

數據透視表組件帶有一組聚合函數，一個拖放界面，一個舒適的字段列表和自定義選項。在與圖表庫特別是Highcharts集成時，它非常靈活。

構建儀表板

構建任何儀表板都需要首先定義數據分析的目標，指定關鍵指標并收集相關數據。

我們不會參與本教程的準備工作。我們將扮演一個虛構的人力資源部門的角色，希望更好地可視化有關組織員工的數據。用一些虛構的人力資源數據，幫助我們開始實驗。

那么，我們應該從哪里開始呢？

第1步：包含庫

 與Highcharts一樣，Pivot Table與大多數前端技術（包括React和Angular框架）順利集成。對于本教程，我們不討論框架，而只是使用靜態HTML頁面進行演示。

通過它的CDN將WebDataRocks鏈接到庫，創建一個空的HTML頁面并將WebDataRocks嵌入到我們的頁面中。

打開您的HTML文件，其中包括帶有一些示例數據的WebDataRocks。

第2步：添加數據

嵌入數據透視表后，我們就可以用數據填充數據透視表了。將其連接到數據源。

步驟3：建立報告

接下來，定義要在網格上顯示的數據。

這是我們得到的：

步驟4：將數據發送到圖表

 集成Highcharts很容易。如Highcharts文檔中所述，一個整潔的JSON文件就是用默認設置來獲取圖表所需的全部內容。

對我們來說幸運的是，此步驟可以由腳本附帶的WebDataRocks連接器處理。

要將數據發送到圖表，我們可以使用一種特殊的方法– webdatarocks.highcharts.getData（）。

顧名思義，該方法從樞軸請求并獲取聚合數據。根據圖表的類型，該方法會根據所需的結構對數據進行預處理。（這很容易！）一旦觸發了方法的回調，便會根據接收到的數據生成圖表。如果基礎數據（即報告）已更改，則圖表也會更新。

第5步：自定義外觀

 現在，您可以將儀表板自定義為您選擇的配色方案。

結果

通過將兩個JavaScript庫一起使用，您可以與數據透視表進行交互并立即查看圖表中反映的更改。

=====================================================

想要購買Highcharts正版授權的朋友可以。

更多精彩內容，敬請關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼