下載Highcharts最新試用版

如果您是想要以編程方式創建托管圖表的開發人員，那么Highcharts Cloud API可能適合您。

雖然您可能會認為Highcharts Cloud是一個用戶友好的前端，用于創建，存儲和發布圖表，但還有更多功能。Cloud API提供了一種以編程方式創建和修改托管在云中的圖表的方法。您可以使用Cloud UI執行任何操作，也可以使用API??。您可以考慮這種方法的原因有很多：

• 您可以處理來自任何應用程序的數據，并在Highcharts Cloud中生成圖表。
• 以編程方式生成的圖表成為圖表庫的一部分，可供所選用戶組訪問，或在Web上公開訪問。
• 圖表可供人工編輯進一步自定義。
• 您可以通過API管理團隊，成員及其編輯訪問和編輯權限。
• 已發布的圖表可立即使用，并通過高可用性CDN提供。
• 您無需任何額外工作即可獲得圖表的使用情況統計信息
• 您還可以管理團隊權限和角色。

在本教程中，我將向您展示如何構建從數據庫讀取數據的Web應用程序，并使用Highcharts Cloud API創建，復制和刪除圖表。我將使用以下技術Nodejs，expressJS，MongoDB和jQuery。Javascript，Node.js和MongoDB的基本知識有助于更好地理解應用程序代碼。

您可以從以下GitHub鏈接下載本文中使用的代碼。

最終的應用程序如下所示：

在進一步討論之前，請確保您擁有具有API訪問權限的Highcharts Cloud計劃（Enterprise或Team Advanced）。

我將首先介紹一下架構和一些代碼; 然后我將向您展示如何獲取和運行該應用程序。

架構

主要思想是創建一個RESTful應用程序，該應用程序公開一個簡單的API，允許用戶根據從MongoDB獲取的數據集創建Highcharts Cloud圖表。

下面的應用程序流程圖顯示了如何處理兩個不同的請求：讀取數據和創建圖表。復制和刪除圖表與創建圖表具有相同的代碼結構。

讓我們來看看架構的每個元素。

數據庫

我使用MongoDB數據庫來存儲圖表的信息，例如標題和系列數據。MongoDB在構建JavaScript應用程序時很容易使用，因為它本身存儲JSON。這意味著查詢結果表示為正確的JavaScript對象，這使得事情更加整潔。

以下是數據庫中保存的數據結構：

{
    "data": [
        43934,
        52503,
        57177,
        69658,
        97031,
        119931,
        137133,
        154175,
        354175
    ],
    "title": "New Solar installation in 2030"
}

我使用mLab（在線服務）來管理我的數據庫。mLab提供免費計劃，足以滿足此應用需求。任何其他服務或本地MongoDB實例也將起作用。

用戶界面

客戶端頁面具有以下功能：

• 從數據庫中讀取數據。
• 創建圖表。
• 復制圖表。
• 刪除圖表。

HTML（index.html）和CSS（style.css）文件用于構建用戶界面; javascript文件（app.js）負責執行請求。如果您已經從GitHub下載了代碼，則可以在公共文件夾中找到這些文件：

我使用jQuery來監聽按鈕點擊，以及執行對服務器的Ajax請求。任何其他庫或框架也可以正常工作，您需要做的就是綁定到click事件，并執行Ajax請求。您還可以使用XMLHttpRequest和getElementByID來使用vanilla JavaScript。

所有四個按鈕都具有相同的代碼結構。 以下是發送readDataFromDB命令的代碼：

 //Read data from DB to the myServer
  $("#readDataFromDB").click(function() {
    $.ajax({
      type: "GET",
      url: "//localhost:3000/readDataFromDB",

      dataType: 'json',
      contentType: 'application/json',
      success: function(res) {
        //Show status
        console.log(res);
        showStatus(res.status, '#readDataFromDBLabel');
      },
      error: function() {
        //Show status
        console.log(res);
        showStatus(res.status, '#readDataFromDBLabel');
      }
    });
  });

此代碼將處理程序綁定到readDataFromDB 按鈕的click事件。處理程序對RESTful服務器上的/ readDataFromDB路由執行Ajax請求。請求完成后，我會更改按鈕旁邊狀態標簽的標題，以反映使用showStatus（status，target）函數發生的情況。

請注意，我將dataType設置為json。這是因為我們的RESTFul服務器使用JSON格式的數據進行響應。它還告訴jQuery自動將返回的數據轉換為實際的JavaScript對象。狀態作為第一個參數傳遞給要發布的函數showSatus（）; 標簽用作第二個參數，在本例中使用ID readDataFromDBLabel。

function showStatus(result, label) {
  $(label).text("Status: " + result);
};

以下是包含所有請求的其余用戶界面代碼：

document.addEventListener('DOMContentLoaded', function() {

  //Read data from DB to the myServer
  $("#readDataFromDB").click(function() {
    $.ajax({
      type: "GET",
      url: "//localhost:3000/readDataFromDB",

      dataType: 'json',
      contentType: 'application/json',
      success: function(res) {
        //Show status
        console.log(res);
        showStatus(res.status, '#readDataFromDBLabel');
      },
      error: function() {
        //Show status
        console.log(res);
        showStatus(res.status, '#readDataFromDBLabel');
      }
    });

  });


  //Create chart 
  $("#sendToHCCloud").click(function() {

    $.ajax({
      type: "GET",
      url: "//localhost:3000/sendToHCCloud",

      dataType: 'json',
      contentType: 'application/json',
      success: function(res) {
        //Show status
        console.log(res);
        showStatus(res.status, '#sendToHCCloudLabel');
      },
      error: function() {
        //Show status
        console.log(res);
        showStatus(res.status, '#sendToHCCloudLabel');
      }
    });

  });

  //duplicate chart
  $("#duplicateChart").click(function() {

    $.ajax({
      type: "GET",
      url: "//localhost:3000/duplicateChart",

      dataType: 'json',
      contentType: 'application/json',
      success: function(res) {
        //Show status
        console.log(res);
        showStatus(res.status, '#duplicateChartLabel');
      },
      error: function() {
        //Show status
        console.log(res);
        showStatus(res.status, '#duplicateChartLabel');
      }
    });

  });

  //Delete the chart
  $("#deleteChart").click(function() {
    $.ajax({
      type: "GET",
      url: "//localhost:3000/deleteChart",

      dataType: 'json',
      contentType: 'application/json',
      success: function(res) {
        //Show status
        console.log(res);
        showStatus(res.status, '#deleteChartLabel');
      },
      error: function() {
        //Show status
        console.log(res);
        showStatus(res.status, '#deleteChartLabel');
      }
    });

  });

}, false);

購買Highchart正版授權，請點擊“”喲！