jQuery 中下鑽 FusionCharts 教程

已發表: 2022-03-11

可視化數據使其更易於閱讀

在處理數據分析時，大多數公司依賴 MS Excel 或 Google Sheets。雖然這些是強大的工具，但很難注意到趨勢，更不用說從大行電子表格數據中獲得任何意義了。處理以這種方式呈現的數據並不是很有趣，但是一旦你為這些數據添加了可視化，事情就會變得更容易管理，這就是今天教程的主題——使用 jQuery 製作交互式圖表。

很難從電子表格數據行中註意到趨勢，但是一旦添加了可視化...

鳴叫

我將在這個項目中使用 FusionCharts 的 JavaScript 圖表庫，因為它提供了一個包含 90 多個圖表的大型庫，與所有瀏覽器兼容，並且非常易於使用。它還為 jQuery 提供了一個專用插件，這將使我們的工作更輕鬆。

我將首先使用 FusionCharts 的核心 JavaScript 庫及其 jQuery 圖表插件製作一個基本圖表，然後我將添加向下鑽取功能。向下鑽取允許您通過單擊數據圖從一個圖表轉到另一個圖表。

術語“數據圖”是上下文相關的；它指的是柱形圖中的列，折線圖中的線條，餅圖中的餅片。通過單擊父圖表中的數據圖，您會看到一個子圖表，顯示更深一層的相關數據。

單擊父圖表上的數據圖將顯示一個子圖表。

了解 FusionCharts

在開始本教程之前，讓我們先了解一下 FusionCharts 的基本結構。每個圖表都由以下關鍵元素組成：

Caption：圖表上的標題。它解釋了正在繪製的圖表。
子標題：標題下方的文本指定附加圖表信息，通常它說明收集數據的時間範圍。
圖例：這將為圖表上的每個數據圖顯示一個符號。可以通過單擊其各自的圖例圖標來啟用或禁用特定的圖。
數據圖：這些是圖表上的數據表示。數據圖可以是柱形圖中的列、折線圖中的線或餅圖中的餅圖。
工具提示：當您將鼠標懸停在數據圖上時出現的文本，用於傳達有關該特定數據圖的其他信息。

製作下鑽圖

在開始之前，這是我們將在本教程中製作的圖表的屏幕截圖。您可以在此處查看 JSFiddle 或在我的 GitHub 存儲庫中訪問該項目的完整源代碼。

我已將製作下鑽圖表的過程分為五個步驟，讓我們開始吧。

第 1 步：包含 JavaScript 文件並創建圖表容器

首先，我們需要使用<script>標籤包含我們項目所依賴的所有 JS 文件。如果該頁面尚不存在，請創建一個空白 HTML 文檔並在<head>部分中包含以下文件。現在我們需要以下四個文件：

縮小的 jQuery
FusionCharts 的主要 JS 庫（包括fusioncharts.js和fusioncharts.charts.js ）
FusionCharts 的 jQuery 插件

我們的<head>部分現在看起來像這樣：

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

現在我們已經包含了所有依賴項，是時候為圖表創建容器<div>並使用以下 HTML 代碼將其嵌入到我們的頁面中：

 <div>drill-down chart will load here</div>

現在，我們可以在代碼中使用 jQuery 的$選擇器來選擇它：

 $("#drill-down-chart")

注意：如果您的頁面上有多個圖表，則每個圖表都需要一個單獨的容器，並具有唯一的id 。

第 2 步：獲取和構建數據

FusionCharts 接受 JSON 和 XML 格式的數據，但我選擇使用 JSON，因為它已成為跨 Web 應用程序數據交換的標準格式。基本圖表的 JSON 數據數組包含每個數據圖的對象，在每個數據圖對像中，我們定義了其各自的標籤和值。該結構如下所示：

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

當我們繪製向下鑽取圖表時，它的 JSON 變得更加複雜。父圖表和子圖表之間的鏈接需要在數據數組的每個對象內多一個key value 。新鍵（不出所料，稱為link ）將包含子圖表的 id，當單擊其父數據圖時，您將獲得該 id。定義子圖表id的格式是newchart-dataFormat-childId 。由於我們使用的是 JSON，我們知道我們鏈接的任何內容都將看起來像newchart-json-childId 。以下是我們為圖表定義它的方式：

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

第 3 步：插入圖表數據

準備好數據後，就可以使用 jQuery 插件提供的insertFusionCharts方法在頁面上插入圖表了：

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

讓我們分解上面的代碼片段：

type定義了我們正在繪製的父圖表的類型。在這種情況下， column2d 。 FusionCharts 庫中的每個圖表都有一個唯一的別名。您可以在 FusionCharts 的圖表列表頁面上找到要繪製的圖表的別名。
id設置圖表的唯一 id，不要與包含我們圖表的<div>元素的 id 混淆。圖表的id用於選擇圖表以應用事件處理程序和調用方法。我們將在第 5 步中使用它。
width和height以像素或百分比為單位設置圖表的尺寸。 100% 寬度告訴圖表佔據整個容器寬度。
我們使用dataFormat屬性定義數據格式。我們在示例中使用 JSON，但也有其他可接受的數據格式，例如 XML URL。想了解更多關於數據格式的信息，請參考 FusionCharts 的官方文檔頁面。
dataSource包含圖表的實際內容，其中的chart對象包含圖表的配置選項，例如標題和子標題。 data數組應該看起來很熟悉，因為我們在第 2 步中創建了它（它包含要繪製的數據）， linkedData包含子圖表的內容（單擊父圖表上的數據圖後得到的圖表）。

相關：聘請前 3% 的自由大數據架構師。

第 4 步：為子圖表創建鏈接數據數組

現在我們已經定義了父圖表，是時候為每個數據圖創建一個子圖表了，這個過程與創建父圖表非常相似。在“insertFusionCharts”方法中創建的linkedData數組將為每個子圖表定義一個單獨的對象。第一個子圖表的數據如下所示：

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id是我們在步驟 2 中定義的單個子圖表的linkedChart與步驟 3 中的dataSource相似，因為它包含該圖表的實際內容。圖表對像中還有許多其他屬性，我將在後面的部分“使用圖表屬性改進設計”中詳細介紹。

步驟 5：自定義向下鑽取配置

多種圖表類型

到目前為止，我們的示例代碼具有共享相同圖表類型的父圖表和子圖表。如果您想向下鑽取到不同的圖表類型（例如，從列到餅圖），您可以通過綁定fusionchartsrendered事件來實現。

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

在上面的代碼中， fusionchartsrendered事件將調用configureLink方法，該方法定義了所有子圖表的類型以及任何覆蓋按鈕選項。您還可以為每個子圖表指定單獨的圖表類型。 configureLink方法中有很多可用的選項，因此您可能會發現從 FusionCharts 查看其 API 參考文檔很有用。

在不同的 div 中渲染圖表

您可以做的另一件很酷的事情是將子圖表呈現在不同的容器中，而不是與其父容器相同的容器中。為此，在父圖表容器之後定義一個單獨的 HTML <div>容器，並將其 id 傳遞給renderAt屬性，如下所示：

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

賦予renderAt屬性的值指定子圖表將在其中呈現的<div>的 id ( chart-container2 )。

使用圖表屬性改進設計

按照本教程，您將獲得一個功能圖表，但如果您將其保留在那裡，它會有些難看。要獲得更吸引人的演示文稿，您需要使用裝飾性的“圖表屬性”。圖表屬性在chart對象內部定義並用於自定義呈現選項。在查看這些關鍵的可配置屬性時，您可能會發現參考 FusionCharts 說明圖很有用：

paletteColors顏色定義數據圖的顏色。如果您在此處提供一種顏色，則所有列都將是該顏色。如果您提供多種顏色，則第一列將採用第一個值，第二列將採用第二個值，依此類推。
plotSpacePercent控制列之間的空間。其默認值為 20（該值為 int，但單位為百分比），允許範圍為 0-80。零值將使列聚在一起並相互粘連。
baseFont定義圖表的字體系列。你可以使用任何你喜歡的字體；我在圖表中使用了 Google 的 Open Sans。只需在 HTML 頁面中包含外部字體文件，以便在圖表中使用它。
plotToolText允許您自定義工具提示。通過使用諸如$label和 * $dataValue類的宏，您可以從<div>內部顯示特定數據圖的特定信息，然後使用內聯 CSS 設置該<div>的樣式。這是我在示例中所做的：

 "plotToolText": "<div>$label: $dataValue</div>"

theme允許您在不同的文件中定義圖表屬性並在此處應用一次，而不是將圖表對象與眾多圖表屬性混淆。您可以在項目的 GitHub 存儲庫的 JS 文件夾中找到本教程的主題文件 - toptal.js 。

這就是我要介紹的全部內容，但是圖表有一百多個屬性，所以如果您想進一步探索，請訪問 FusionCharts 的圖表屬性頁面並蒐索您的特定圖表類型。