下載Highcharts最新試用版

在上篇文章中，我們講到了在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號。

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的說明：

1. / readDataFromDB從數據庫中讀取數據。
2. / sendToHCCloud根據檢索到的數據構建圖表，并使用它在Highcharts Cloud中創建圖表。
3. / duplicateChart復制先前創建的圖表。
4. / 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的標簽顯示消息：

說明

查詢獲取存儲在數據庫中的所有數據，但只讀取和處理第一個元素：

 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: '//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文件并添加憑據。

2.安裝包

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

3.啟動應用

鍵入以下命令啟動服務器：node myServer.js

打開Highcharts Cloud帳戶，然后轉到“chart/圖表”部分以查看應用程序操作的結果。

在Web瀏覽器中打開一個新窗口或選項卡，然后轉到//127.0.0.1:3000。 一次單擊一個按鈕，等待狀態標簽更新，然后單擊此序列中的下一個按鈕：

1. 讀數據。
2. 檢查命令行結果和標簽狀態。
3. 發送/創建圖表。
4. 檢查命令行結果，標簽狀態和Highcharts Cloud Charts部分。
5. 重復圖表。
6. 檢查命令行結果，標簽狀態和Highcharts Cloud Charts部分。
7. 刪除圖表。
8. 檢查命令行結果，標簽狀態和Highcharts Cloud Charts部分。
9. 如果一切順利，您應該得到以下結果：

上述內容就是如何在Highchart中使用應用程序來使用Highcharts Cloud API。