highcharts动态更新，HighChart教程如何使用HighchartsCloud

火客 2023-01-08 07:37:12 468

highcharts动态更新，HighChart教程如何使用HighchartsCloud还需要获取数据库凭据：如果您尚未为Highcharts Cloud创建API凭据，请继续执行此操作。你需要得到：//express to set the server var express = require('express'); var app = express(); //request to communicate with the highcharts cloud var request = require('request'); //cors to send/receive data in JSON format across domains var cors = require('cors'); //to set the public path where the index.html is saved var path = require('path'); //confi

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

一、本地服务

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

快速创建本地服务器。
请求与Highcharts Cloud工具进行通信。
Mongoose来管理mongo数据库。
Config-js用于存储数据库和Highcharts Cloud的登录名和密码。
Cors避免跨域政策问题，要了解有关政策的更多信息，请点击此处。
以可移植的方式处理文件路径的路径（请注意，此模块是节点本身的一部分）
在每个会话之前启动clear screen命令。

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

//express to set the server var express = require('express'); var app = express(); //request to communicate with the highcharts cloud var request = require('request'); //cors to send/receive data in JSON format across domains var cors = require('cors'); //to set the public path where the index.html is saved var path = require('path'); //config-json to store the passwords API key etc var config=require('config-json'); //Mongoose to communicate with the database var 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号。

highcharts动态更新，HighChart教程如何使用HighchartsCloud(1)

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的标签显示消息：

highcharts动态更新，HighChart教程如何使用HighchartsCloud(2)

说明

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

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生成）和请求状态。

说明

要发送和接收JSON数据，请不要忘记将属性json设置为true。现在，您了解了体系结构以及代码如何工作，是时候进行一些练习了。

四、实践

遵循以下步骤

1.下载代码

要获取演示应用程序，请转到GitHub上的此链接，然后复制或克隆项目。

然后，转到保存项目的位置，打开文件夹，然后创建config.json文件并添加凭据。

highcharts动态更新，HighChart教程如何使用HighchartsCloud(3)