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

點擊下載Highcharts最新試用版

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

在本教程中，我將向您展示如何使用Highcharts構(gòu)建交互式信息圖。該圖表的主題是對美洲杯和2016年歐洲杯的比較。這些數(shù)字是根據(jù)此處的“標(biāo)準(zhǔn)”靜態(tài)信息圖改編而成的。

備注

強(qiáng)烈建議您了解Javascript，Node.js，expressJS和MongoDB的基礎(chǔ)知識，以了解應(yīng)用程序代碼。

我將首先介紹該體系結(jié)構(gòu)。然后我將解釋代碼。

架構(gòu)

基本上，該項目是將靜態(tài)和動態(tài)數(shù)據(jù)集結(jié)合起來，以創(chuàng)建更具吸引力的信息圖。數(shù)據(jù)是：

1. 2016年美洲杯和歐洲杯的關(guān)鍵數(shù)字。
2. 現(xiàn)場測驗的結(jié)果。

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

我們檢查架構(gòu)的每個部分。

數(shù)據(jù)庫

測驗結(jié)果保存在MongoDB中。此應(yīng)用程序中有兩個測驗：

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

備注

MongoDB在構(gòu)建JavaScript應(yīng)用程序時易于使用，因為它本地存儲JSON。當(dāng)然，您可以自由使用適合您的任何其他數(shù)據(jù)庫或服務(wù)。

這是保存在數(shù)據(jù)庫中的數(shù)據(jù)的結(jié)構(gòu)：

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

2、第二次測驗

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

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

1、測驗

2、測驗的結(jié)果

所有頁面都有兩個按鈕可以轉(zhuǎn)到下一頁或上一頁。

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

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

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

• host.js 都有兩個賽事的地圖，所有錦標(biāo)賽都在此進(jìn)行。
• hostPage.js 具有用于呈現(xiàn)頁面的HTML代碼。

我使用jQuery對服務(wù)器執(zhí)行Ajax請求。但是，任何其他庫或框架也可以正常工作。與管理請求有關(guān)的文件位于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);
      }
    });

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

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

備注
確保使用文件保護(hù)您的憑據(jù)config.json

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

服務(wù)器提供四個路由：

• postHostData 將主持人測驗答案保存到數(shù)據(jù)庫中。
• getHostData 從數(shù)據(jù)庫讀取主機(jī)測驗結(jié)果。
• postPlayerData 將玩家測驗答案保存到數(shù)據(jù)庫中。
• getPlayerData 從數(shù)據(jù)庫中讀取玩家測驗結(jié)果。

一旦創(chuàng)建了應(yīng)用程序的所有組件，您要做的就是找到一個Web服務(wù)來托管該應(yīng)用程序。我使用在線云Web服務(wù)AmazonAWS，但是任何其他服務(wù)都可以完成這項工作。請注意該文件以在AWS lambda上運行應(yīng)用程序。該文件的代碼非常基本：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);
};

就是這樣，就這么簡單。現(xiàn)在您知道了如何使用Highcharts構(gòu)建響應(yīng)式交互式信息圖，而所有這些都無需框架。

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