Hadoopデータ分析プラットフォームの実戦

オフラインデータ分析プラットフォームの実戦
Highchartsの紹介
HighchartsはHighsoftが提供している純粋なJavaScriptで作成したグラフライブラリで、簡単で便利なウェブサイトやwebアプリケーションにインタラクティブなグラフを追加し、個人学習、個人サイト、非商業用途に無料で提供します.High Chartsがサポートするグラフの種類は、曲線図、区域図、ヒストグラム、円グラフ、散状点図、総合図表などがあります.Highchartsの特徴:互換性が強く、図表のテーマタイプが多く、操作性が強く、使いやすいです.Highchartsの他に、HighsoftはHighstockとHighmapsを提供しており、それぞれタイムデータと地図を表示しています.
環境設定
一般的にHighchartsとjQueryを一緒に使うので、highcharts.jsとjquery.min.jsの二つのjsファイルを導入する必要があります.Highstockを使うなら、highstock.jsを導入する必要があります.Highmapsはhighmaps.jsを導入する必要があります.jsダウンロードアドレスに対応しています.http://www.hcharts.cn/product/download.php. ここではhighcharts 4.1.8とhighmaps 1.1.8を選択します.
Highchartsリソースファイルのカタログ紹介

|-- examples               
|-- exporting-server          
|-- gfx                      
|-- graphics                  
|-- js                    js       （  .src            ）
|-- index.htm                 

Highchartsの紹介
https://api.hcharts.cn/highcharts
グラフコンテナチャート作成/バインディング
high chartsは、2つの方法でchartオブジェクトの作成をサポートし、それぞれ第1の"$("#container").highcharts({....})"である.第二の方法は"var charts = new Highcharts.Chart({chart : {renderTo : "container"}});"であり、第二の方法はrender Toに指定された値は必ず容器IDであることを要求する.これらの2つの方法により、対応するコンテナには、バインディングが完了すると、$("#container").highcharts()を介してバインディングされたチャートオブジェクトを取得することができる.
ケース

は、data 1.txtファイルの気象データを表示するように要求される静的な折れ線図を表示する.

は、最初の例をヒストグラムに変え、各ブロックの線上の温度値を示す.

は、最初の例では、著作権情報を表示しないように修正し、折れ線図をグラフに変更します.

は、第3のケースにおいて、補助線の表示、カスタマイズlegend(凡例)、Tooltip(データ表示ボックス)、およびデータ出力(中国語)を行う.マウスが対応ノードに移動する時、補助線を表示し、またそれぞれ平均最高気温と最低気温の補助線を表示することを要求する.カバーチャートに表示され、左上に表示されるようにしてください.データ提示ボックスに最高温度と最低温度を同時に表示することが必要です.

は円グラフを表示し、data 2.txtのブラウザユーザデータを表示することを要求する.

は、第5のケースをもとに、あるブラウザの扇形をクリックした後、別のコンテナにこのブラウザの具体的なユーザ使用データを表示し、具体的なデータはdata 3.txtにある.

は中国の各省のユーザーのip訪問量の展示図を示しています.具体的なデータはdata 4.txtにあります.