HighChartチュートリアル:Highcharts Cloud APIの使用方法(2)



Highchart Tutorial How Use Highcharts Cloud Api



Highchartsの最新の試用版をダウンロードする

前回の記事では、 HighchartのクラウドAPIアーキテクチャ この記事では、APIのローカルサービスを紹介し、データベースからデータを読み取り、グラフを作成します。



まず、ローカルサービス

ローカルサーバーは、Node.jsと次のモジュールを使用して構築されました。

  • ローカルサーバーをすばやく作成します。
  • HighchartsCloudツールとの通信をリクエストします。
  • mongoデータベースを管理するためのMongoose。
  • Config-jsは、データベースとHighchartsCloudのログイン名とパスワードを保存するために使用されます。
  • Corsは、クロスドメインポリシーの問題を回避します。ポリシーの詳細については、ここをクリックしてください。
  • 移植可能な方法でファイルパスへのパスを処理します(このモジュールはノード自体の一部であることに注意してください)
  • 各セッションの前に、clearscreenコマンドを開始します。

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クラウドチームID。
  • Highcharts CloudAPIキー。

また、データベースの資格情報を取得する必要があります。

  • データベースのログインとパスワード。
  • データベースのホスト名/ URL。

Highcharts CloudチームID番号は、API管理ページにあります。

HighChart

App.listen()は、HTTPサーバーを起動するために使用されます。 mongooseモジュールのconnectメソッド(mongooose.connect( 'mongodb://' + DBlogin + ':' + DBPwd + DBLink))を使用してデータベースに接続します。
MongoDBからデータを取得するには、Chartモデルのスキーマを作成する必要があります。

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

技術的には、データベースから取得する必要があるフィールドはタイトルとデータのみですが、mLabがデフォルトで作成するため、コード> entity_idを追加する必要があります。そうしないと、データを正しく読み取ることができません。

フロントエンドはAjaxを使用してmyServerにリクエストを送信します。以下はAPIの説明です。

  1. / readDataFromDBは、データベースからデータを読み取ります。
  2. / sendToHCCloudは、取得したデータに基づいてグラフを作成し、それを使用してHighchartsCloudでグラフを作成します。
  3. / duplicateChart以前に作成したグラフをコピーします。
  4. / deleteChartは、以前に作成されたチャートを削除します。

最後の3つのAPIルートは同じ構造を持っているので、最初と2番目のリクエストに焦点を当てましょう。

次に、データベースからデータを読み取ります

すべてのリクエストはフロントエンド(index.html)を介して投稿されます。たとえば、index.htmlでボタンをクリックしてデータを読み取ると、app.jsはAPIパス/ readDataFromDBを使用してajaxリクエストをmyServerに送信します。 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に返送され、app.jsはその結果を使用して、IDがreadDataFromDBLabelTitleのラベルを持つメッセージを表示します。

HighChart

説明

クエリはデータベースに保存されているすべてのデータを取得しますが、最初の要素のみを読み取って処理します。

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

第三に、チャート

[チャートの送信/作成]ボタンをクリックし、/ sendToHCCloudを使用して、myServerへのajaxリクエストルーティングを実行します。そのリクエストハンドラは次のとおりです。

app.get('/sendToHCCloud', function(reqUp, resUp) { //Set up request configuration var setChart = { url: 'https://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 CloudAPIと通信します。リクエストはバックエンドのAjax関数に少し似ています-外部サーバーへのHTTPリクエストを実行します。構成オブジェクトと、要求の実行時に実行されるハンドラーの2つの引数を受け入れます。

上記のコードでは、/ team /:teamID / chart routeを使用して、特定のチームの新しいグラフを作成します。これはPOSTルートであるため、リクエストを実行するときにメソッド/動詞を正しく設定することが重要です。

また、APIキーはリクエストの一部であることに注意してください(setChartオブジェクトを参照)。キーは、リクエストの特別なヘッダーに設定されます。ペイロードはbodyプロパティで設定されます。

オプションオブジェクトを作成した後、request()関数を呼び出してリクエストを実行し、チャートID(Highcharts Cloudによって生成された)とリクエストステータスを読み戻します。

説明

JSONデータを送受信するには、プロパティjsonをtrueに設定することを忘れないでください。アーキテクチャとコードの仕組みを理解したところで、次はいくつかの演習を行います。

第四に、練習

以下の手順に従ってください

コードをダウンロード

デモアプリを入手するには、GitHubでこれにアクセスしてください リンク 次に、プロジェクトをコピーまたは複製します。
次に、プロジェクトを保存した場所に移動し、フォルダーを開いてから、config.jsonファイルを作成し、資格情報を追加します。

HighChart

2.インストールパッケージ

ターミナルを開き、コードをダウンロードしたフォルダーに移動し、npm installと入力し、Enterキーを押してモジュールの依存関係をインストールします。 OSXでターミナルを開くには、Command + Spaceを押してターミナルに書き込み、Windowsでターミナルを開き、Win + Rを押し、cmdを書き込んで、Enterキーを押します。ターミナル内の正しいフォルダに移動するには、cdと記述します。

HighChart

3.アプリを起動します

次のコマンドを入力してサーバーを起動します:node myServer.js

HighChart

Highcharts Cloudアカウントを開き、「chart / chart」セクションに移動して、アプリケーションアクションの結果を確認します。

HighChart

Webブラウザーで新しいウィンドウまたはタブを開き、http://127.0.0.1:3000にアクセスします。一度にボタンをクリックし、ステータスラベルが更新されるのを待ってから、次の順序で次のボタンをクリックします。

  1. データを読み取ります。
  2. コマンドラインの結果とタグのステータスを確認します。
  3. チャートを送信/作成します。
  4. コマンドラインの結果、タグのステータス、およびHighcharts CloudChartsセクションを確認してください。
  5. チャートを繰り返します。
  6. コマンドラインの結果、タグのステータス、およびHighcharts CloudChartsセクションを確認してください。
  7. チャートを削除します。
  8. コマンドラインの結果、タグのステータス、およびHighcharts CloudChartsセクションを確認してください。
  9. すべてがうまくいけば、次の結果が得られるはずです。

HighChart

上記の内容はどうですか ハイチャート アプリケーションを使用して、Highcharts CloudAPIを使用します。