下載Highcharts最新試用版

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

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

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

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

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

最終的應(yīng)用程序如下所示：

在進(jìn)一步討論之前，請(qǐng)確保您擁有具有API訪問權(quán)限的Highcharts Cloud計(jì)劃（Enterprise或Team Advanced）。

我將首先介紹一下架構(gòu)和一些代碼; 然后我將向您展示如何獲取和運(yùn)行該應(yīng)用程序。

架構(gòu)

主要思想是創(chuàng)建一個(gè)RESTful應(yīng)用程序，該應(yīng)用程序公開一個(gè)簡(jiǎn)單的API，允許用戶根據(jù)從MongoDB獲取的數(shù)據(jù)集創(chuàng)建Highcharts Cloud圖表。

下面的應(yīng)用程序流程圖顯示了如何處理兩個(gè)不同的請(qǐng)求：讀取數(shù)據(jù)和創(chuàng)建圖表。復(fù)制和刪除圖表與創(chuàng)建圖表具有相同的代碼結(jié)構(gòu)。

讓我們來看看架構(gòu)的每個(gè)元素。

數(shù)據(jù)庫

我使用MongoDB數(shù)據(jù)庫來存儲(chǔ)圖表的信息，例如標(biāo)題和系列數(shù)據(jù)。MongoDB在構(gòu)建JavaScript應(yīng)用程序時(shí)很容易使用，因?yàn)樗旧泶鎯?chǔ)JSON。這意味著查詢結(jié)果表示為正確的JavaScript對(duì)象，這使得事情更加整潔。

以下是數(shù)據(jù)庫中保存的數(shù)據(jù)結(jié)構(gòu)：

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

我使用mLab（在線服務(wù)）來管理我的數(shù)據(jù)庫。mLab提供免費(fèi)計(jì)劃，足以滿足此應(yīng)用需求。任何其他服務(wù)或本地MongoDB實(shí)例也將起作用。

用戶界面

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

• 從數(shù)據(jù)庫中讀取數(shù)據(jù)。
• 創(chuàng)建圖表。
• 復(fù)制圖表。
• 刪除圖表。

HTML（index.html）和CSS（style.css）文件用于構(gòu)建用戶界面; javascript文件（app.js）負(fù)責(zé)執(zhí)行請(qǐng)求。如果您已經(jīng)從GitHub下載了代碼，則可以在公共文件夾中找到這些文件：

我使用jQuery來監(jiān)聽按鈕點(diǎn)擊，以及執(zhí)行對(duì)服務(wù)器的Ajax請(qǐng)求。任何其他庫或框架也可以正常工作，您需要做的就是綁定到click事件，并執(zhí)行Ajax請(qǐng)求。您還可以使用XMLHttpRequest和getElementByID來使用vanilla JavaScript。

所有四個(gè)按鈕都具有相同的代碼結(jié)構(gòu)。 以下是發(fā)送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事件。處理程序?qū)ESTful服務(wù)器上的/ readDataFromDB路由執(zhí)行Ajax請(qǐng)求。請(qǐng)求完成后，我會(huì)更改按鈕旁邊狀態(tài)標(biāo)簽的標(biāo)題，以反映使用showStatus（status，target）函數(shù)發(fā)生的情況。

請(qǐng)注意，我將dataType設(shè)置為json。這是因?yàn)槲覀兊腞ESTFul服務(wù)器使用JSON格式的數(shù)據(jù)進(jìn)行響應(yīng)。它還告訴jQuery自動(dòng)將返回的數(shù)據(jù)轉(zhuǎn)換為實(shí)際的JavaScript對(duì)象。狀態(tài)作為第一個(gè)參數(shù)傳遞給要發(fā)布的函數(shù)showSatus（）; 標(biāo)簽用作第二個(gè)參數(shù)，在本例中使用ID readDataFromDBLabel。

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

以下是包含所有請(qǐng)求的其余用戶界面代碼：

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正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！