HighChart教程：如何使用Highcharts Cloud API（一）

HighChart教程：如何使用Highcharts Cloud API（一） 789 阅读 0 评论 0 点赞

HighChart教程：如何使用Highcharts Cloud API（一）

如果您是想要以编程方式创建托管图表的开发人员，那么Highcharts Cloud API可能适合您。

虽然您可能会认为Highcharts Cloud是一个用户友好的前端，用于创建，存储和发布图表，但还有更多功能。Cloud API提供了一种以编程方式创建和修改托管在云中的图表的方法。您可以使用Cloud UI执行任何操作，也可以使用API。您可以考虑这种方法的原因有很多：

您可以处理来自任何应用程序的数据，并在Highcharts Cloud中生成图表。
以编程方式生成的图表成为图表库的一部分，可供所选用户组访问，或在Web上公开访问。
图表可供人工编辑进一步自定义。
您可以通过API管理团队，成员及其编辑访问和编辑权限。
已发布的图表可立即使用，并通过高可用性CDN提供。
您无需任何额外工作即可获得图表的使用情况统计信息
您还可以管理团队权限和角色。

在本教程中，我将向您展示如何构建从数据库读取数据的Web应用程序，并使用Highcharts Cloud API创建，复制和删除图表。我将使用以下技术Nodejs，expressJS，MongoDB和jQuery。Javascript，Node.js和MongoDB的基本知识有助于更好地理解应用程序代码。

您可以从以下GitHub链接下载本文中使用的代码。

最终的应用程序如下所示：

在进一步讨论之前，请确保您拥有具有API访问权限的Highcharts Cloud计划（Enterprise或Team Advanced）。

我将首先介绍一下架构和一些代码; 然后我将向您展示如何获取和运行该应用程序。

架构

主要思想是创建一个RESTful应用程序，该应用程序公开一个简单的API，允许用户根据从MongoDB获取的数据集创建Highcharts Cloud图表。

下面的应用程序流程图显示了如何处理两个不同的请求：读取数据和创建图表。复制和删除图表与创建图表具有相同的代码结构。

让我们来看看架构的每个元素。

数据库

我使用MongoDB数据库来存储图表的信息，例如标题和系列数据。MongoDB在构建JavaScript应用程序时很容易使用，因为它本身存储JSON。这意味着查询结果表示为正确的JavaScript对象，这使得事情更加整洁。

以下是数据库中保存的数据结构：

{
 "data": [
 43934,
 52503,
 57177,
 69658,
 97031,
 119931,
 137133,
 154175,
 354175
 ],
 "title": "New Solar installation in 2030"
}

我使用mLab（在线服务）来管理我的数据库。mLab提供免费计划，足以满足此应用需求。任何其他服务或本地MongoDB实例也将起作用。

用户界面

客户端页面具有以下功能：

从数据库中读取数据。
创建图表。
复制图表。
删除图表。

HTML（index.html）和CSS（style.css）文件用于构建用户界面; javascript文件（app.js）负责执行请求。如果您已经从GitHub下载了代码，则可以在公共文件夹中找到这些文件：

我使用jQuery来监听按钮点击，以及执行对服务器的Ajax请求。任何其他库或框架也可以正常工作，您需要做的就是绑定到click事件，并执行Ajax请求。您还可以使用XMLHttpRequest和getElementByID来使用vanilla JavaScript。

所有四个按钮都具有相同的代码结构。以下是发送readDataFromDB命令的代码：

 //Read data from DB to the myServer
 $("#readDataFromDB").click(function() {
 $.ajax({
 type: "GET",
 url: "http://localhost:3000/readDataFromDB",
 dataType: 'json',
 contentType: 'application/json',
 success: function(res) {
 //Show status
 console.log(res);
 showStatus(res.status, '#readDataFromDBLabel');
 },
 error: function() {
 //Show status
 console.log(res);
 showStatus(res.status, '#readDataFromDBLabel');
 }
 });
 });

此代码将处理程序绑定到readDataFromDB 按钮的click事件。处理程序对RESTful服务器上的/ readDataFromDB路由执行Ajax请求。请求完成后，我会更改按钮旁边状态标签的标题，以反映使用showStatus（status，target）函数发生的情况。

请注意，我将dataType设置为json。这是因为我们的RESTFul服务器使用JSON格式的数据进行响应。它还告诉jQuery自动将返回的数据转换为实际的JavaScript对象。状态作为第一个参数传递给要发布的函数showSatus（）; 标签用作第二个参数，在本例中使用ID readDataFromDBLabel。

function showStatus(result, label) {
 $(label).text("Status: " + result);
};

以下是包含所有请求的其余用户界面代码：

document.addEventListener('DOMContentLoaded', function() {
 //Read data from DB to the myServer
 $("#readDataFromDB").click(function() {
 $.ajax({
 type: "GET",
 url: "http://localhost:3000/readDataFromDB",
 dataType: 'json',
 contentType: 'application/json',
 success: function(res) {
 //Show status
 console.log(res);
 showStatus(res.status, '#readDataFromDBLabel');
 },
 error: function() {
 //Show status
 console.log(res);
 showStatus(res.status, '#readDataFromDBLabel');
 }
 });
 });
 //Create chart 
 $("#sendToHCCloud").click(function() {
 $.ajax({
 type: "GET",
 url: "http://localhost:3000/sendToHCCloud",
 dataType: 'json',
 contentType: 'application/json',
 success: function(res) {
 //Show status
 console.log(res);
 showStatus(res.status, '#sendToHCCloudLabel');
 },
 error: function() {
 //Show status
 console.log(res);
 showStatus(res.status, '#sendToHCCloudLabel');
 }
 });
 });
 //duplicate chart
 $("#duplicateChart").click(function() {
 $.ajax({
 type: "GET",
 url: "http://localhost:3000/duplicateChart",
 dataType: 'json',
 contentType: 'application/json',
 success: function(res) {
 //Show status
 console.log(res);
 showStatus(res.status, '#duplicateChartLabel');
 },
 error: function() {
 //Show status
 console.log(res);
 showStatus(res.status, '#duplicateChartLabel');
 }
 });
 });
 //Delete the chart
 $("#deleteChart").click(function() {
 $.ajax({
 type: "GET",
 url: "http://localhost:3000/deleteChart",
 dataType: 'json',
 contentType: 'application/json',
 success: function(res) {
 //Show status
 console.log(res);
 showStatus(res.status, '#deleteChartLabel');
 },
 error: function() {
 //Show status
 console.log(res);
 showStatus(res.status, '#deleteChartLabel');
 }
 });
 });
}, false);