ハイチャート-概要

*Highcharts* は、インタラクティブなチャート作成機能を追加してWebアプリケーションを強化することを目的とした、純粋なJavaScriptベースのチャート作成ライブラリです。 幅広いチャートをサポートしています。 チャートは、Chrome、Firefox、Safari、Internet Explorer（IE）などの標準ブラウザーでSVGを使用して描画されます。 レガシーIE 6では、VMLを使用してグラフィックを描画します。

Highcharts Libraryの機能

ここで、Highcharts Libraryのいくつかの重要な機能について説明します。

互換性-すべての主要なブラウザと、AndroidやiOSなどのモバイルプラットフォームで動作します。
マルチタッチのサポート-AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。iPhone/iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
無料-オープンソースであり、非営利目的で無料で使用できます。
軽量-サイズが約35 KBのhighcharts.jsコアライブラリは、非常に軽量なライブラリです。
シンプルな構成-jsonを使用してチャートのさまざまな構成を定義し、非常に簡単に習得して使用できます。
動的-チャート生成後でもチャートを変更できます。
複数軸-x、y軸に制限されません。チャート上の複数の軸をサポートします。
設定可能なツールチップ-ユーザーがチャート上の任意のポイントにカーソルを合わせるとツールチップが表示されます。 Highchartsは、ツールチップをプログラムで制御するツールチップの組み込みフォーマッターまたはコールバックフォーマッターを提供します。
* DateTimeサポート*-日付時刻を特別に処理します。日付に関する賢明なカテゴリに対して多数の組み込みコントロールを提供します。
エクスポート-エクスポート機能を有効にして、グラフをPDF/PNG/JPG/SVG形式にエクスポートします。
印刷-Webページを使用してグラフを印刷します。
Zoomablity -データをより正確に表示するズームチャートをサポートします。
外部データ-サーバーからの動的なデータのロードをサポートします。コールバック関数を使用してデータを制御します。
テキストの回転-あらゆる方向のラベルの回転をサポートします。

サポートされているチャートタイプ

Highchartsライブラリは、チャートの次のタイプを提供します-

Sr.No.	Chart Type & Description
1	Line Charts 線/スプラインベースのチャートを描くために使用されます。
2	Area Charts エリアごとのチャートを描画するために使用されます。
3	Pie Charts 円グラフの描画に使用されます。
4	Scatter Charts 散布図の描画に使用されます。
5	Bubble Charts バブルベースのチャートを描画するために使用されます。
6	Dynamic Charts ユーザーがチャートを変更できる動的チャートを描画するために使用されます。
7	Combinations さまざまなチャートの組み合わせを描画するために使用されます。
8	3D Charts 立体チャートの描画に使用されます。
9	Angular Gauges 速度計タイプのチャートを描画するために使用されます。
10	Heat Maps ヒートマップの描画に使用されます。
11	Tree Maps ツリーマップの描画に使用されます。

以降の章では、上記のチャートの各タイプについて例を挙げて詳細に説明します。

ライセンス

Highchartsはオープンソースであり、非営利目的で自由に使用できます。商用プロジェクトでHighchartsを使用するには、次のリンクにアクセスしてください-https://shop.highsoft.com/highchartsl [ライセンスと価格]

ハイチャート-環境設定

この章では、Webアプリケーション開発で使用されるHighchartsライブラリの設定方法について説明します。

ハイチャートには、依存関係としてjQueryが必要です。まず、jQueryライブラリをインストールしてから、Highchartsライブラリをインストールします。

jQueryをインストールする

jQueryを使用するには2つの方法があります。

ダウンロード-https://jquery.com/[jQuery.com]からローカルにダウンロードして使用します。
* CDNアクセス*-CDNにもアクセスできます。 CDNを使用すると、世界中の地域のデータセンターにアクセスできます。この場合、Googleホスト。これは、CDNを使用することで、ファイルをホストする責任を独自のサーバーから一連の外部サーバーに移すことを意味します。これには、Webページの訪問者が同じCDNからjQueryのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。

ダウンロードしたjQueryの使用

次のスクリプトを使用してHTMLページにjQuery JavaScriptファイルを含めます-

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

CDNを使用する

'_このチュートリアルでは、jQueryライブラリのCDNバージョンを使用しています。_

次のスクリプトを使用してHTMLページにjQuery JavaScriptファイルを含めます-

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

ハイチャートをインストールする

以下は、Highchartsを使用する2つの方法です。

ダウンロード-https://www.highcharts.com/[highcharts.com]からローカルにダウンロードして使用します。
* CDNアクセス*-CDNにもアクセスできます。 CDNを使用すると、世界中の地域のデータセンターにアクセスできます。この場合、Highchartsホスト-Code.Highcharts.Com。

ダウンロードしたハイチャートの使用

次のスクリプトを使用して、HTMLページにHighcharts JavaScriptファイルを含めます-

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

CDNを使用する

'_このチュートリアルでは、HighchartsライブラリのCDNバージョンを使用しています。_

次のスクリプトを使用して、HTMLページにHighcharts JavaScriptファイルを含めます-

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

ハイチャート-構成構文

この章では、Highcharts APIを使用してグラフを描画するために必要な構成を紹介します。

ステップ1：HTMLページを作成する

jQueryおよびHighcharts JavaScriptライブラリを使用してHTMLページを作成します。

*_HighchartsTestHarness_*

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>

      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>

   </body>
</html>

ここでは、 container divを使用して、Highchartsライブラリを使用して描画されたチャートを含めます。

ステップ2：構成を作成する

Highchartsライブラリーは、json構文を使用した非常に単純な構成を使用します。

$('#container').highcharts(json);

ここで、jsonは、highchartsライブラリがhighcharts（）メソッドを使用してコンテナdiv内にチャートを描画するために使用するjsonデータと構成を表します。次に、さまざまなパラメーターを構成して、必要なJSON文字列を作成します。

タイトル

チャートのタイトルを構成します。

var title = {
   text: 'Monthly Average Temperature'
};

字幕

チャートのサブタイトルを構成します。

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

X軸に表示されるティッカーを構成します。

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

タイトル、Y軸に表示されるプロットラインを設定します。

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

ツールチップ

ツールチップを構成します。値の後に追加する接尾辞を入れます（y軸）。

var tooltip = {
   valueSuffix: '\xB0C'
}

伝説

凡例を、他のプロパティとともにチャートの右側に表示されるように構成します。

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

シリーズ

チャートに表示されるデータを構成します。シリーズは、この配列の各要素がチャート上の単一の線を表す配列です。

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

ステップ3：JSONデータを作成する

すべての構成を組み合わせます。

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

ステップ4：チャートを描く

$('#container').highcharts(json);

例

構成構文をさらに理解するには、次の例を検討してください-

*_highcharts_configuration_*

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               },
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                     24.1, 20.1, 14.1, 8.6, 2.5]
               },
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               },
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>

</html>

結果

結果を確認します。

ハイチャート-折れ線グラフ

折れ線グラフは、折れ線/スプラインベースのグラフの描画に使用されます。このセクションでは、さまざまな種類の折れ線グラフとスプラインベースのグラフについて説明します。

Sr.No.	Chart Type & Description
1	Basic line 基本的な折れ線グラフ。
2	With data labels データラベル付きのグラフ。
3	Ajax loaded data, clickable points サーバーからデータを取得した後に描画されたグラフ。
4	Time series, zoomable 時系列を使用したグラフ。
5	Spline with inverted axes 反転軸を持つスプライングラフ。
6	Spline with symbols 熱/雨のシンボルを使用したスプラインチャート。
7	Spline with plot bands プロットバンド付きのスプライングラフ。
8	Time data with irregular intervals 大量の時間ベースのデータのチャート。
9	Logarithmic axis 対数軸を示すチャート。

ハイチャート-エリアチャート

エリアチャートは、エリアベースのチャートを描画するために使用されます。このセクションでは、さまざまなタイプの面積ベースのチャートについて説明します。

Sr.No.	Chart Type & Description
1	Basic Area 基本的な面グラフ。
2	Area with negative values 負の値を持つ面グラフ。
3	Stacked area 互いに積み上げられた領域を持つグラフ。
4	Percentage area パーセンテージでデータを示すグラフ。
5	Area with missing points データに欠損点があるチャート。
6	Inverted axes 反転軸を使用するエリア。
7	Area-spline スプラインを使用した面グラフ。
8	Area range 範囲を使用した面グラフ。
9	Area range and line 範囲と線を使用した面グラフ。

ハイチャート-棒グラフ

棒グラフは、面積ベースのグラフを描くために使用されます。このセクションでは、さまざまなタイプの棒グラフを説明します。

Sr.No.

Chart Type & Description

1

Basic Bar

基本的な棒グラフ。

2

Stacked Bar

棒が積み上げられた棒グラフ。

3

Negative Stacked area

負のスタックを持つ棒グラフ。

ハイチャート-縦棒グラフ

縦棒グラフは、縦棒ベースのグラフを描画するために使用されます。このセクションでは、さまざまなタイプの列ベースのチャートについて説明します。

Sr.No.	Chart Type & Description
1	Basic Column 基本的な縦棒グラフ。
2	Column with negative values 負の値を持つ縦棒グラフ。
3	Stacked column 列が互いに積み上げられたグラフ。
4	Stacked and Grouped column 積み上げおよびグループ化された形式の列を持つグラフ。
5	Column with stacked percentage 積み上げパーセンテージのグラフ。
6	Column with rotated labels 列にラベルが回転した縦棒グラフ。
7	Column with drilldown ドリルダウン機能付きの縦棒グラフ。
8	Column with fixed placement 固定配置の縦棒グラフ。
9	Data defined in HTML table HTMLテーブルで定義されたデータを使用した縦棒グラフ。
10	Column Range 範囲を使用した縦棒グラフ。

ハイチャート-円グラフ

円グラフは、円ベースのグラフを描くために使用されます。このセクションでは、さまざまなタイプの円グラフを説明します。

Sr.No.	Chart Type & Description
1	Basic Pie 基本的な円グラフ。
2	Pie with Legends 凡例付きの円グラフ。
3	Donut Chart ドーナツグラフ。
4	Semi circle Donut 半円ドーナツグラフ。
5	Pie with drill down ドリルダウン機能付きの円グラフ。
6	Pie chart with gradient グラデーション塗りつぶし付きの円グラフ。
7	Pie chart with monochrome モノクロ塗りつぶし付きの円グラフ。

ハイチャート-散布図

散布図は、散布図に基づいて作成されます。このセクションでは、さまざまなタイプの散布図に基づいたチャートについて説明します。

Sr.No.	Chart Type & Description
1	Scatter Chart 散布図。

ハイチャート-バブルチャート

バブルチャートは、バブルベースのチャートを描画するために使用されます。このセクションでは、さまざまな種類のバブルベースのチャートについて説明します。

Sr.No.

Chart Type & Description

1

Bubbles Chart

バブルチャート。

2

3D Bubbles Chart

3Dバブルチャート。

ハイチャート-動的チャート

動的なチャートは、チャートのレンダリング後にデータを変更できるデータベースのチャートを描画するために使用されます。このセクションでは、さまざまなタイプの動的チャートについて説明します。

Sr.No.

Chart Type & Description

1

Spline updating each second

毎秒更新されるスプラインチャート。

2

Click to add a point

ポイント追加機能を備えたチャート。

ハイチャート-組み合わせ

組み合わせチャートは、混合チャートを描画するために使用されます。たとえば、円グラフ付きの棒グラフ。このセクションでは、さまざまなタイプの組み合わせチャートについて説明します。

Sr.No.	Chart Type & Description
1	Column, Line and Pie 列、線、および円グラフ。
2	Dual Axes, Line and Column 二重軸、線、および列を持つグラフ。
3	Multiple Axes 複数の軸を持つグラフ。
4	Scatter with regression line 回帰線を含む散布図。

ハイチャート-立体チャート

3Dチャートは、3次元チャートを描くために使用されます。このセクションでは、さまざまなタイプの3Dチャートについて説明します。

Sr.No.	Chart Type & Description
1	3D Column 3D縦棒グラフ。
2	3D Column with null 値がnullおよび0の3D縦棒グラフ。
3	3D Column with stacking 積み上げとグループ化を含む3D縦棒グラフ。
4	3D Pie 3D円グラフ。
5	3D Donut 3Dドーナツグラフ。

ハイチャート-角度ゲージ

角度ゲージチャートは、メーター/ゲージタイプのチャートを描画するために使用されます。このセクションでは、Angular Gaugesチャートのさまざまなタイプについて説明します。

Sr.No.	Chart Type & Description
1	Angular Gauge 角度ゲージチャート。
2	Solid Gauge ソリッドゲージチャート。
3	Clock クロック。
4	Gauge with dual axes 二重軸のゲージチャート。
5	VU Meter VUメーターチャート。

ハイチャート-ヒートマップ

ヒートマップチャートは、ヒートマップタイプのチャートを描画するために使用されます。このセクションでは、さまざまなタイプのヒートマップについて説明します。

Sr.No.

Chart Type & Description

1

Heat Map

ヒートマップ。

2

Large Heat Map

大きなヒートマップ。

ハイチャート-ツリーマップ

ツリーマップチャートは、ツリーマップタイプのチャートを描画するために使用されます。このセクションでは、さまざまなタイプのツリーマップについて説明します。

Sr.No.

Chart Type & Description

1

Tree Map

色軸を持つツリーマップ。

2

Tree Map with Levels

レベル付きのツリーマップ。

3

Large Tree Map

大きなツリーマップ。

Highcharts-quick-guide

ハイチャート-概要

Highcharts Libraryの機能

サポートされているチャートタイプ

ライセンス

ハイチャート-環境設定

jQueryをインストールする

ダウンロードしたjQueryの使用

CDNを使用する

ハイチャートをインストールする

ダウンロードしたハイチャートの使用

CDNを使用する

ハイチャート-構成構文

ステップ1：HTMLページを作成する

ステップ2：構成を作成する

タイトル

字幕

xAxis

yAxis

ツールチップ

伝説

シリーズ

ステップ3：JSONデータを作成する

ステップ4：チャートを描く

例

結果

ハイチャート-折れ線グラフ

ハイチャート-エリアチャート

ハイチャート-棒グラフ

ハイチャート-縦棒グラフ

ハイチャート-円グラフ

ハイチャート-散布図

ハイチャート-バブルチャート

ハイチャート-動的チャート

ハイチャート-組み合わせ

ハイチャート-立体チャート

ハイチャート-角度ゲージ

ハイチャート-ヒートマップ

ハイチャート-ツリーマップ

目次