下載Highcharts最新試用版

在上篇文章中，我們講到了在Highchart中Cloud API的架構(gòu)，本文將介紹API的本地服務(wù)，從數(shù)據(jù)庫中讀取數(shù)據(jù)以及創(chuàng)建圖表。

一、本地服務(wù)

借助以下模塊使用Node.js構(gòu)建了本地服務(wù)器：

• 快速創(chuàng)建本地服務(wù)器。
• 請(qǐng)求與Highcharts Cloud工具進(jìn)行通信。
• Mongoose來管理mongo數(shù)據(jù)庫。
• Config-js用于存儲(chǔ)數(shù)據(jù)庫和Highcharts Cloud的登錄名和密碼。
• Cors避免跨域政策問題，要了解有關(guān)政策的更多信息，請(qǐng)點(diǎn)擊此處。
• 以可移植的方式處理文件路徑的路徑（請(qǐng)注意，此模塊是節(jié)點(diǎn)本身的一部分）
• 在每個(gè)會(huì)話之前啟動(dòng)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');

創(chuàng)建對(duì)象來存儲(chǔ)從數(shù)據(jù)庫中獲取的數(shù)據(jù)：

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

所有憑據(jù)都保存在名為config.json的單獨(dú)文件中：

{
    //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創(chuàng)建API憑據(jù)，請(qǐng)繼續(xù)執(zhí)行此操作。你需要得到：

• Highcharts Cloud team ID.
• Highcharts Cloud API key.

還需要獲取數(shù)據(jù)庫憑據(jù)：

• Database login and password.
• Database hostname/URL.

您可以在API管理頁面上找到Highcharts Cloud team ID號(hào)。

app.listen（）用于啟動(dòng)我們的HTTP服務(wù)器，我們使用mongoose模塊上的connect方法連接到數(shù)據(jù)庫（mongooose.connect（'mongodb：//'+ DBlogin +'：'+ DBPwd + DBLink）;）。
要從MongoDB中檢索數(shù)據(jù)，我需要?jiǎng)?chuàng)建用于Chart模型的模式：

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

從技術(shù)上講，需要從數(shù)據(jù)庫中獲得的唯一字段是標(biāo)題和數(shù)據(jù)，但必須添加code> entity_id，因?yàn)閙Lab默認(rèn)創(chuàng)建它。 否則，無法正確讀取數(shù)據(jù)。

前端使用Ajax向myServer發(fā)送請(qǐng)求，以下是API的說明：

1. / readDataFromDB從數(shù)據(jù)庫中讀取數(shù)據(jù)。
2. / sendToHCCloud根據(jù)檢索到的數(shù)據(jù)構(gòu)建圖表，并使用它在Highcharts Cloud中創(chuàng)建圖表。
3. / duplicateChart復(fù)制先前創(chuàng)建的圖表。
4. / deleteChart刪除以前創(chuàng)建的圖表。

最后三個(gè)API路由具有相同的結(jié)構(gòu)，因此讓我們聚焦第一個(gè)和第二個(gè)請(qǐng)求。

二、從數(shù)據(jù)庫中讀取數(shù)據(jù)

所有請(qǐng)求都是通過前端（index.html）發(fā)布的。例如，一旦在index.html上單擊按鈕讀取數(shù)據(jù)，app.js就會(huì)使用API路徑/readDataFromDB向myServer發(fā)送ajax請(qǐng)求。myServer接收請(qǐng)求，并執(zhí)行我們?yōu)樵撀酚稍O(shè)置的處理程序：

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（）方法從數(shù)據(jù)庫中獲取數(shù)據(jù)，并將結(jié)果存儲(chǔ)在dataToSendObject中。 然后將狀態(tài)結(jié)果發(fā)送回app.js，前端使用該結(jié)果使用id為readDataFromDBLabelTitle的標(biāo)簽顯示消息：

說明

查詢獲取存儲(chǔ)在數(shù)據(jù)庫中的所有數(shù)據(jù)，但只讀取和處理第一個(gè)元素：

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

三、圖表

單擊Send/create圖表按鈕，使用/sendToHCCloud向myServer執(zhí)行ajax請(qǐng)求路線。它的請(qǐng)求處理程序如下所示：

app.get('/sendToHCCloud', function(reqUp, resUp) {
  //Set up request configuration
  var setChart = {
    url: '//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
      });
    }
  });
});

使用請(qǐng)求與Highcharts Cloud API進(jìn)行通信。請(qǐng)求有點(diǎn)像后端的Ajax函數(shù) - 它向外部服務(wù)器執(zhí)行HTTP請(qǐng)求。 它接受兩個(gè)參數(shù) - 配置對(duì)象和執(zhí)行請(qǐng)求時(shí)執(zhí)行的處理函數(shù)。

在上面的代碼中，使用/ team /：teamID / chart route，它為給定的團(tuán)隊(duì)創(chuàng)建一個(gè)新圖表。 這是一個(gè)POST路由，因此在執(zhí)行請(qǐng)求時(shí)正確設(shè)置方法/動(dòng)詞非常重要。

另請(qǐng)注意，API密鑰是請(qǐng)求的一部分（請(qǐng)參閱setChart對(duì)象）。 密鑰在請(qǐng)求中設(shè)置為特殊標(biāo)頭。 有效負(fù)載在body屬性上設(shè)置。

創(chuàng)建我們的選項(xiàng)對(duì)象后，我調(diào)用request（）函數(shù)來執(zhí)行請(qǐng)求，然后讀回圖表ID（由Highcharts Cloud生成）和請(qǐng)求狀態(tài)。

說明

要發(fā)送和接收J(rèn)SON數(shù)據(jù)，請(qǐng)不要忘記將屬性json設(shè)置為true。現(xiàn)在，您了解了體系結(jié)構(gòu)以及代碼如何工作，是時(shí)候進(jìn)行一些練習(xí)了。

四、實(shí)踐

遵循以下步驟

1.下載代碼

要獲取演示應(yīng)用程序，請(qǐng)轉(zhuǎn)到GitHub上的此鏈接，然后復(fù)制或克隆項(xiàng)目。
然后，轉(zhuǎn)到保存項(xiàng)目的位置，打開文件夾，然后創(chuàng)建config.json文件并添加憑據(jù)。

2.安裝包

打開終端，導(dǎo)航到下載代碼的文件夾，然后鍵入npm install并按Enter鍵以安裝模塊依賴項(xiàng)。要在OSX上打開終端，按命令+空格并寫入終端，在Windows上打開一個(gè)終端，按Win + R，寫入cmd并按回車鍵。 要導(dǎo)航到終端中的正確文件夾，請(qǐng)寫入cd。

3.啟動(dòng)應(yīng)用

鍵入以下命令啟動(dòng)服務(wù)器：node myServer.js

打開Highcharts Cloud帳戶，然后轉(zhuǎn)到“chart/圖表”部分以查看應(yīng)用程序操作的結(jié)果。

在Web瀏覽器中打開一個(gè)新窗口或選項(xiàng)卡，然后轉(zhuǎn)到//127.0.0.1:3000。 一次單擊一個(gè)按鈕，等待狀態(tài)標(biāo)簽更新，然后單擊此序列中的下一個(gè)按鈕：

1. 讀數(shù)據(jù)。
2. 檢查命令行結(jié)果和標(biāo)簽狀態(tài)。
3. 發(fā)送/創(chuàng)建圖表。
4. 檢查命令行結(jié)果，標(biāo)簽狀態(tài)和Highcharts Cloud Charts部分。
5. 重復(fù)圖表。
6. 檢查命令行結(jié)果，標(biāo)簽狀態(tài)和Highcharts Cloud Charts部分。
7. 刪除圖表。
8. 檢查命令行結(jié)果，標(biāo)簽狀態(tài)和Highcharts Cloud Charts部分。
9. 如果一切順利，您應(yīng)該得到以下結(jié)果：

上述內(nèi)容就是如何在Highchart中使用應(yīng)用程序來使用Highcharts Cloud API。