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

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

點擊下載Highcharts最新版

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

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

為何選擇儀表板

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

不需要昂貴的BI（商業(yè)智能）。您只需要WebDataRocks Pivot Table和Highcharts。以下是它們?nèi)绾螀f(xié)同工作：

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

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

構(gòu)建儀表板

構(gòu)建任何儀表板都需要首先定義數(shù)據(jù)分析的目標(biāo)，指定關(guān)鍵指標(biāo)并收集相關(guān)數(shù)據(jù)。

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

那么，我們應(yīng)該從哪里開始呢？

第1步：包含庫

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

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

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

第2步：添加數(shù)據(jù)

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

步驟3：建立報告

接下來，定義要在網(wǎng)格上顯示的數(shù)據(jù)。

這是我們得到的：

步驟4：將數(shù)據(jù)發(fā)送到圖表

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

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

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

顧名思義，該方法從樞軸請求并獲取聚合數(shù)據(jù)。根據(jù)圖表的類型，該方法會根據(jù)所需的結(jié)構(gòu)對數(shù)據(jù)進行預(yù)處理。（這很容易！）一旦觸發(fā)了方法的回調(diào)，便會根據(jù)接收到的數(shù)據(jù)生成圖表。如果基礎(chǔ)數(shù)據(jù)（即報告）已更改，則圖表也會更新。

第5步：自定義外觀

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

結(jié)果

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

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

想要購買Highcharts正版授權(quán)的朋友可以。

更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼