如果您是想要以编程方式创建托管图表的开发人员，那么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: "", 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: "", 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: "", 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: "", 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: "", 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);

点击“了解更多”下载产品最新试用版

↓↓↓