HighChart教程：如何使用Highcharts Cloud API（二）-白红宇

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

阅读量：6235 次

发布时间：2019-06-22

本文共 4761 字，大约阅读时间需要 15 分钟。

在上篇文章中，我们讲到了，本文将介绍API的本地服务，从数据库中读取数据以及创建图表。

一、本地服务

借助以下模块使用Node.js构建了本地服务器：

快速创建本地服务器。

请求与Highcharts Cloud工具进行通信。

Mongoose来管理mongo数据库。

Config-js用于存储数据库和Highcharts Cloud的登录名和密码。

Cors避免跨域政策问题，要了解有关政策的更多信息，请点击此处。

以可移植的方式处理文件路径的路径（请注意，此模块是节点本身的一部分）

在每个会话之前启动clear screen命令。

myServer代码的第一部分是要求模块：

//express to set the servervar express = require('express');var app = express();//request to communicate with the highcharts cloudvar request = require('request');//cors to send/receive data in JSON format across domainsvar cors = require('cors');//to set the public path where the index.html is savedvar path = require('path');//config-json to store the passwords, API key, etcvar config=require('config-json');//Mongoose to communicate with the databasevar mongoose = require('mongoose');

创建对象来存储从数据库中获取的数据：

var dataToSendObject = {  data: {    template: {},    options: {      title: {        text: ""      },      series: [{}]    },    settings:{     constructor:"Chart",     dataProvider: {       csv: ""      }    }  }};

所有凭据都保存在名为config.json的单独文件中：

{    //HCCloud team id        "teamID" : 123456,         //HCCloud API key        "APIKey" : '123456',         // MongoBD's username and password        "dbCredentials":{        "DBlogin" : 'name',        "DBpwd" : '123456',     },    //MongoDB database link    "BLink" : '123x123x', }

说明

如果您尚未为Highcharts Cloud创建API凭据，请继续执行此操作。你需要得到：

Highcharts Cloud team ID.

Highcharts Cloud API key.

还需要获取数据库凭据：

Database login and password.

Database hostname/URL.

您可以在API管理页面上找到Highcharts Cloud team ID号。

HighChart

app.listen（）用于启动我们的HTTP服务器，我们使用mongoose模块上的connect方法连接到数据库（mongooose.connect（'mongodb：//'+ DBlogin +'：'+ DBPwd + DBLink）;）。

要从MongoDB中检索数据，我需要创建用于Chart模型的模式：

var chartSchema = new Schema({  entity_id: String,  title: Object,  data: Array});

从技术上讲，需要从数据库中获得的唯一字段是标题和数据，但必须添加code> entity_id，因为mLab默认创建它。否则，无法正确读取数据。

前端使用Ajax向myServer发送请求，以下是API的说明：

/ readDataFromDB从数据库中读取数据。

/ sendToHCCloud根据检索到的数据构建图表，并使用它在Highcharts Cloud中创建图表。

/ duplicateChart复制先前创建的图表。

/ deleteChart删除以前创建的图表。

最后三个API路由具有相同的结构，因此让我们聚焦第一个和第二个请求。

二、从数据库中读取数据

所有请求都是通过前端（index.html）发布的。例如，一旦在index.html上单击按钮读取数据，app.js就会使用API路径/readDataFromDB向myServer发送ajax请求。myServer接收请求，并执行我们为该路由设置的处理程序：

app.get('/readDataFromDB', function(reqUp, resUp) {  Chart.find({}, function(err, data) { //Data represents the data fetched from the DB    if (err) {      return resUp.send({        status: err      });    }    console.log("Read from db: success");    //Copy the title    dataToSendObject.data.options.title.text = data[0].title;    //Copy the data series    dataToSendObject.data.options.series[0].data = data[0].data;    //send status    resUp.send({      status: "Ok"    });  });});

处理程序使用Chart.find（）方法从数据库中获取数据，并将结果存储在dataToSendObject中。然后将状态结果发送回app.js，前端使用该结果使用id为readDataFromDBLabelTitle的标签显示消息：

HighChart

说明

查询获取存储在数据库中的所有数据，但只读取和处理第一个元素：

 dataToSendObject.data.options.title.text = data[0].title; dataToSendObject.data.options.series[0].data = data[0].data;

三、图表

单击Send/create图表按钮，使用/sendToHCCloud向myServer执行ajax请求路线。它的请求处理程序如下所示：

app.get('/sendToHCCloud', function(reqUp, resUp) {  //Set up request configuration  var setChart = {    url: 'https://cloud-api.highcharts.com/team/' + teamID + '/chart/',    method: 'POST',    headers: {      'x-api-key': APIKey    },    json: true,    body: dataToSendObject,  };  request(setChart, function(err, res, body) {    if (!err && res.statusCode == msgCodeOk) {      console.log("Create chart on Highcharts cloud:success");      //save the chart id      console.log("chart_id: " + body.chart_id);      chartID = body.chart_id;      resUp.send({        status: res.statusMessage      });    } else {      resUp.send({        status: res.statusMessage      });    }  });});

使用请求与Highcharts Cloud API进行通信。请求有点像后端的Ajax函数 - 它向外部服务器执行HTTP请求。它接受两个参数 - 配置对象和执行请求时执行的处理函数。

在上面的代码中，使用/ team /：teamID / chart route，它为给定的团队创建一个新图表。这是一个POST路由，因此在执行请求时正确设置方法/动词非常重要。

另请注意，API密钥是请求的一部分（请参阅setChart对象）。密钥在请求中设置为特殊标头。有效负载在body属性上设置。

创建我们的选项对象后，我调用request（）函数来执行请求，然后读回图表ID（由Highcharts Cloud生成）和请求状态。