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

點(diǎn)擊下載Highcharts最新試用版

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

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

備注

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

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

架構(gòu)

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

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

 鍵號(hào)存儲(chǔ)在項(xiàng)目文件中，而測(cè)驗(yàn)結(jié)果則保存到數(shù)據(jù)庫(kù)（MongoDB）中，然后通過(guò)服務(wù)器讀取以進(jìn)行可視化。

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

數(shù)據(jù)庫(kù)

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

1. 第一個(gè)測(cè)驗(yàn)是關(guān)于2016年美洲杯和2016年歐洲杯的主辦國(guó)。
2. 第二場(chǎng)測(cè)驗(yàn)是關(guān)于每項(xiàng)賽事中最有價(jià)值的球員。

備注

MongoDB在構(gòu)建JavaScript應(yīng)用程序時(shí)易于使用，因?yàn)樗镜卮鎯?chǔ)JSON。當(dāng)然，您可以自由使用適合您的任何其他數(shù)據(jù)庫(kù)或服務(wù)。

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

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

2、第二次測(cè)驗(yàn)

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

用戶界面非常簡(jiǎn)單明了。它有13頁(yè)（或屏幕，因?yàn)樗菃?頁(yè)應(yīng)用程序）。每個(gè)頁(yè)面顯示：有關(guān)這兩個(gè)事件的一個(gè)主鍵號(hào)。

1、測(cè)驗(yàn)

2、測(cè)驗(yàn)的結(jié)果

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

頁(yè)面在此文件夾下：src/pages

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

例如，宿主頁(yè)文件夾具有以下文件：

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

我使用jQuery對(duì)服務(wù)器執(zhí)行Ajax請(qǐng)求。但是，任何其他庫(kù)或框架也可以正常工作。與管理請(qǐng)求有關(guān)的文件位于utils文件夾下。

有兩個(gè)請(qǐng)求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ù)是保存測(cè)驗(yàn)數(shù)據(jù)并從數(shù)據(jù)庫(kù)中檢索它們。
我使用帶有以下模塊的Node.js構(gòu)建了服務(wù)器：

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

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

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

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

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

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

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

隨時(shí)與您分享圖表和Highcharts的經(jīng)驗(yàn)，如果您有任何疑問(wèn)或評(píng)論，請(qǐng)使用下面的評(píng)論部分告訴我。