半岛外围网上直营

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的经验，如果您有任何疑问或评论，请使用下面的评论部分告诉我。