下載Highcharts最新試用版

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

一、本地服務(wù)

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

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

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

所有憑據(jù)都保存在名為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創(chuàng)建API憑據(jù)，請繼續(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號。

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

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

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

前端使用Ajax向myServer發(fā)送請求，以下是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)建的圖表。

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

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

所有請求都是通過前端（index.html）發(fā)布的。例如，一旦在index.html上單擊按鈕讀取數(shù)據(jù)，app.js就會使用API路徑/readDataFromDB向myServer發(fā)送ajax請求。myServer接收請求，并執(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é)果存儲在dataToSendObject中。 然后將狀態(tài)結(jié)果發(fā)送回app.js，前端使用該結(jié)果使用id為readDataFromDBLabelTitle的標(biāo)簽顯示消息：

說明

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

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

三、圖表

單擊Send/create圖表按鈕，使用/sendToHCCloud向myServer執(zhí)行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進(jìn)行通信。請求有點像后端的Ajax函數(shù) - 它向外部服務(wù)器執(zhí)行HTTP請求。 它接受兩個參數(shù) - 配置對象和執(zhí)行請求時執(zhí)行的處理函數(shù)。

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

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

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

說明

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

四、實踐

遵循以下步驟

1.下載代碼

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

2.安裝包

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

3.啟動應(yīng)用

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

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

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

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。