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

點擊下載Highcharts最新試用版

正確完成信息圖表后，信息圖表就會脫離“標準”圖表的框，以更具視覺吸引力的方式告訴數據故事。在當今時代，大多數信息圖表都是靜態圖像。但是，如果您想吸引在線觀眾，為什么不使用交互式信息圖呢？

在本教程中，我將向您展示如何使用Highcharts構建交互式信息圖。該圖表的主題是對美洲杯和2016年歐洲杯的比較。這些數字是根據此處的“標準”靜態信息圖改編而成的。

備注

強烈建議您了解Javascript，Node.js，expressJS和MongoDB的基礎知識，以了解應用程序代碼。

我將首先介紹該體系結構。然后我將解釋代碼。

架構

基本上，該項目是將靜態和動態數據集結合起來，以創建更具吸引力的信息圖。數據是：

1. 2016年美洲杯和歐洲杯的關鍵數字。
2. 現場測驗的結果。

 鍵號存儲在項目文件中，而測驗結果則保存到數據庫（MongoDB）中，然后通過服務器讀取以進行可視化。

我們檢查架構的每個部分。

數據庫

測驗結果保存在MongoDB中。此應用程序中有兩個測驗：

1. 第一個測驗是關于2016年美洲杯和2016年歐洲杯的主辦國。
2. 第二場測驗是關于每項賽事中最有價值的球員。

備注

MongoDB在構建JavaScript應用程序時易于使用，因為它本地存儲JSON。當然，您可以自由使用適合您的任何其他數據庫或服務。

這是保存在數據庫中的數據的結構：

{
    "name": "hostPolls",
    "answers": [
        96,
        44,
        49,
        49
    ]
}

2、第二次測驗

{
    "name": "playerPolls",
    "answers": [
        32,
        9,
        2,
        27,
        6,
        9
    ]
}

用戶界面非常簡單明了。它有13頁（或屏幕，因為它是單頁應用程序）。每個頁面顯示：有關這兩個事件的一個主鍵號。

1、測驗

2、測驗的結果

所有頁面都有兩個按鈕可以轉到下一頁或上一頁。

頁面在此文件夾下：src/pages

為了更好地組織頁面并簡化以后的維護，每個頁面都有自己的文件夾，其中一個文件包含可視化的數據和內容，另一個文件包含HTML代碼。

例如，宿主頁文件夾具有以下文件：

• host.js 都有兩個賽事的地圖，所有錦標賽都在此進行。
• hostPage.js 具有用于呈現頁面的HTML代碼。

我使用jQuery對服務器執行Ajax請求。但是，任何其他庫或框架也可以正常工作。與管理請求有關的文件位于utils文件夾下。

有兩個請求postPoll和getPoll：

import ajax from './ajax.js';
export function postPoll(route, answers) {
  return ajax('POST', route, JSON.stringify(answers));
}
export function getPoll(route) {
  return ajax('GET', route);
}

$.ajax({
      type: type,
      url: url + route,
      dataType: 'json',
      data: data,
      contentType: 'application/json',
      success: function(result) {
        resolve(result);
      },
      error: function(error) {
        reject(error);
      }
    });

服務器的主要任務是保存測驗數據并從數據庫中檢索它們。
我使用帶有以下模塊的Node.js構建了服務器：

• 快速創建本地服務器。
• 請求與用戶界面進行通信。
• Mongoose管理mongo數據庫。
• Config-js存儲數據庫的登錄名和密碼。
• CORS避免交叉出身的政策問題
• 路徑處理文件路徑的可移植的方式（請注意，此模塊節點本身的一部分）。
• 清除以在每個會話之前啟動清除屏幕命令。
• AWS Serverless Express，可在AWS lambda和Amazon API Gateway之上運行無服務器應用程序。

備注
確保使用文件保護您的憑據config.json

{
    "dbCredentials":{
        "DBlogin" : "myLogin",
        "DBpwd" : "letMeIn" 
    },
    "BLink" : "myLinkTo/infographic"                
}

服務器提供四個路由：

• postHostData 將主持人測驗答案保存到數據庫中。
• getHostData 從數據庫讀取主機測驗結果。
• postPlayerData 將玩家測驗答案保存到數據庫中。
• getPlayerData 從數據庫中讀取玩家測驗結果。

一旦創建了應用程序的所有組件，您要做的就是找到一個Web服務來托管該應用程序。我使用在線云Web服務AmazonAWS，但是任何其他服務都可以完成這項工作。請注意該文件以在AWS lambda上運行應用程序。該文件的代碼非常基本：lambda.js

const awsServerlessExpress = require('aws-serverless-express');
const app = require('./lib/app');
const server = awsServerlessExpress.createServer(app);
exports.handler = (event, context) => {
  return awsServerlessExpress.proxy(server, event, context);
};

就是這樣，就這么簡單。現在您知道了如何使用Highcharts構建響應式交互式信息圖，而所有這些都無需框架。

隨時與您分享圖表和Highcharts的經驗，如果您有任何疑問或評論，請使用下面的評論部分告訴我。