开源图表库Highcharts教程：互动信息图表

正确完成信息图表后，信息图表就会脱离“标准”图表的框，以更具视觉吸引力的方式告诉数据故事。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新试用版

正确完成信息图表后，信息图表就会脱离“标准”图表的框，以更具视觉吸引力的方式告诉数据故事。在当今时代，大多数信息图表都是静态图像。但是，如果您想吸引在线观众，为什么不使用交互式信息图呢/p>

在本教程中，我将向您展示如何使用Highcharts构建交互式信息图。该图表的主题是对美洲杯和2016年欧洲杯的比较。这些数字是根据此处的“标准”静态信息图改编而成的。

我们的交互式信息图是一个单页应用程序（SPA）。我在不使用任何框架的情况下构建了它，因此代码易于解构。

备注

强烈建议您了解Javascript，Node.js，expressJS和MongoDB的基础知识，以了解应用程序代码。

我将首先介绍该体系结构。然后我将解释代码。

架构

基本上，该项目是将静态和动态数据集结合起来，以创建更具吸引力的信息图。数据是：

1. 2016年美洲杯和欧洲杯的关键数字。
2. 现场测验的结果。

键 存储在项目文件中，而测验结果则保存到数据库（MongoDB）中，然后通过服务器读取以进行可视化。

我们检查架构的每个部分。

数据库

测验结果保存在MongoDB中。此应用程序中有两个测验：

1. 第一个测验是关于2016年美洲杯和2016年欧洲杯的主办国。
2. 第二场测验是关于每项赛事中最有价值的球员。

备注

MongoDB在构建JavaScript应用程序时易于使用，因为它本地存储JSON。当然，您可以自由使用适合您的任何其他数据库或服务。

这是保存在数据库中的数据的结构：

1、第一次测验

{    "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方法在文件中：ajax.js

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

想要购买Highcharts正版授权的朋友可以咨询官方客服
标签：