ハイチャート-クイックガイド
Highchartsは、インタラクティブなチャート機能を追加することでWebアプリケーションを強化することを目的とした純粋なJavaScriptベースのチャートライブラリです。幅広いチャートをサポートします。グラフは、Chrome、Firefox、Safari、Internet Explorer（IE）などの標準的なブラウザでSVGを使用して描画されます。従来のIE6では、VMLを使用してグラフィックを描画します。
Highchartsライブラリの機能
ここで、Highchartsライブラリのいくつかの重要な機能について説明します。
Compatability −AndroidやiOSなどのすべての主要なブラウザとモバイルプラットフォームで動作するように見えます。
Multitouch Support −AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。iPhone/ iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
Free to Use −オープンソースであり、非営利目的で自由に使用できます。
Lightweight −サイズが約35KBのhighcharts.jsコアライブラリは、非常に軽量なライブラリです。
Simple Configurations − jsonを使用してチャートのさまざまな構成を定義し、習得と使用が非常に簡単です。
Dynamic −チャート生成後でもチャートを変更できます。
Multiple axes− x、y軸に限定されません。チャート上の複数の軸をサポートします。
Configurable tooltips−ツールチップは、ユーザーがチャート上の任意のポイントにカーソルを合わせると表示されます。Highchartsは、ツールチップをプログラムで制御するためのツールチップ組み込みフォーマッターまたはコールバックフォーマッターを提供します。
DateTime support−日時を特別に処理します。日付ごとのカテゴリに対する多数の組み込みコントロールを提供します。
Export −エクスポート機能を有効にして、チャートをPDF / PNG / JPG / SVG形式にエクスポートします。
Print −Webページを使用してチャートを印刷します。
Zoomablity −データをより正確に表示するためのズームチャートをサポートします。
External data−サーバーからの動的なデータのロードをサポートします。コールバック関数を使用してデータを制御します。
Text Rotation −任意の方向へのラベルの回転をサポートします。
サポートされているチャートタイプ
Highchartsライブラリは、次のタイプのチャートを提供します-
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | Line Charts 線/スプラインベースのチャートを描画するために使用されます。 |
| 2 | Area Charts エリアごとのグラフを描画するために使用されます。 |
| 3 | Pie Charts 円グラフの描画に使用されます。 |
| 4 | Scatter Charts 散在するチャートを描画するために使用されます。 |
| 5 | Bubble Charts バブルベースのチャートを描画するために使用されます。 |
| 6 | Dynamic Charts ユーザーがグラフを変更できる動的なグラフを描画するために使用されます。 |
| 7 | Combinations さまざまなチャートの組み合わせを描画するために使用されます。 |
| 8 | 3D Charts 3Dチャートの描画に使用されます。 |
| 9 | Angular Gauges スピードメータータイプのチャートを描くために使用されます。 |
| 10 | Heat Maps ヒートマップの描画に使用されます。 |
| 11 | Tree Maps ツリーマップの描画に使用されます。 |
以降の章では、上記の各タイプのチャートについて、例を使用して詳細に説明します。
ライセンス
Highchartsはオープンソースであり、非営利目的で無料で使用できます。商用プロジェクトでHighchartsを使用するには、リンク-ライセンスと価格をたどってください
この章では、Webアプリケーション開発で使用するHighchartsライブラリを設定する方法について説明します。
Highchartsでは、依存関係としてjQueryが必要です。最初にjQueryライブラリをインストールし、次にHighchartsライブラリをインストールします。
jQueryをインストールする
jQueryを使用する方法は2つあります。
Download− jQuery.comからローカルにダウンロードして、使用します。
CDN access−CDNにもアクセスできます。CDNを使用すると、世界中の地域のデータセンターにアクセスできます。この場合、Googleホストです。つまり、CDNを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。これには、Webページの訪問者が同じCDNからjQueryのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。
ダウンロードしたjQueryの使用
次のスクリプトを使用して、jQueryJavaScriptファイルをHTMLページに含めます-
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>CDNの使用
このチュートリアルでは、jQueryライブラリのCDNバージョンを使用しています。
次のスクリプトを使用して、jQueryJavaScriptファイルをHTMLページに含めます-
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>Highchartsをインストールする
Highchartsを使用する2つの方法は次のとおりです。
Download −ローカルからダウンロード
CDN access−CDNにもアクセスできます。CDNを使用すると、世界中の地域のデータセンターにアクセスできます。この場合、Highchartsホスト-Code.Highcharts.Com。
ダウンロードしたハイチャートの使用
次のスクリプトを使用して、HTMLページにHighchartsJavaScriptファイルを含めます-
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>CDNの使用
このチュートリアルでは、HighchartsライブラリのCDNバージョンを使用しています。
次のスクリプトを使用して、HTMLページにHighchartsJavaScriptファイルを含めます-
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>この章では、HighchartsAPIを使用してグラフを描画するために必要な構成を紹介します。
ステップ1：HTMLページを作成する
jQueryおよびHighchartsjavascriptライブラリを使用してHTMLページを作成します。
HighchartsTestHarness.htm
<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
};シリーズ
チャートに表示されるデータを構成します。Seriesは、この配列の各要素がグラフ上の1本の線を表す配列です。
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.htm
<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>結果
結果を確認します。
折れ線グラフは、線/スプラインベースのグラフを描画するために使用されます。このセクションでは、さまざまなタイプの線とスプラインベースのグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | ベーシックライン 基本的な折れ線グラフ。 |
| 2 | データラベル付き データラベル付きのグラフ。 |
| 3 | Ajaxがロードしたデータ、クリック可能なポイント サーバーからデータを取得した後に作成されたグラフ。 |
| 4 | 時系列、ズーム可能 時系列のチャート。 |
| 5 | 逆軸のスプライン 軸が反転したスプラインチャート。 |
| 6 | シンボル付きスプライン 熱/雨の記号を使用したスプラインチャート。 |
| 7 | プロットバンドのスプライン プロットバンド付きスプラインチャート。 |
| 8 | 不規則な間隔の時間データ 時間ベースのデータの大規模なセットのチャート。 |
| 9 | 対数軸 対数軸を表すグラフ。 |
面グラフは、面積ベースのグラフを描画するために使用されます。このセクションでは、さまざまなタイプのエリアベースのグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 基本エリア 基本面グラフ。 |
| 2 | 負の値の領域 負の値を持つ面グラフ。 |
| 3 | スタックエリア 領域が互いに積み重なっているチャート。 |
| 4 | パーセンテージエリア データをパーセンテージで表したグラフ。 |
| 5 | ポイントが欠けているエリア データに欠落しているポイントがあるグラフ。 |
| 6 | 反転軸 逆軸を使用した領域。 |
| 7 | エリアスプライン スプラインを使用した面グラフ。 |
| 8 | 面積範囲 範囲を使用した面グラフ。 |
| 9 | エリア範囲とライン 範囲と線を使用した面グラフ。 |
棒グラフは、エリアベースのグラフを描画するために使用されます。このセクションでは、さまざまなタイプの棒グラフに基づいたグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | ベーシックバー 基本的な棒グラフ。 |
| 2 | スタックドバー バーが重なり合った棒グラフ。 |
| 3 | 負のスタック領域 負のスタックを持つ棒グラフ。 |
列チャートは、列ベースのチャートを描画するために使用されます。このセクションでは、さまざまなタイプの列ベースのグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 基本コラム 基本的な縦棒グラフ。 |
| 2 | 負の値の列 負の値を持つ縦棒グラフ。 |
| 3 | 積み上げ列 列が互いに積み重なっているグラフ。 |
| 4 | スタックおよびグループ化された列 積み重ねられ、グループ化された形式の列を含むグラフ。 |
| 5 | 積み上げパーセンテージの列 積み上げパーセンテージのグラフ。 |
| 6 | ラベルが回転した列 列に回転したラベルが付いた縦棒グラフ。 |
| 7 | ドリルダウン付きの列 ドリルダウン機能を備えた縦棒グラフ。 |
| 8 | 固定配置の柱 配置が固定された縦棒グラフ。 |
| 9 | HTMLテーブルで定義されたデータ HTMLテーブルで定義されたデータを使用した縦棒グラフ。 |
| 10 | 列範囲 範囲を使用した縦棒グラフ。 |
円グラフは、円ベースのグラフを描画するために使用されます。このセクションでは、さまざまな種類の円グラフベースのグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | ベーシックパイ 基本的な円グラフ。 |
| 2 | 伝説のパイ 凡例付きの円グラフ。 |
| 3 | ドーナツグラフ ドーナツグラフ。 |
| 4 | 半円ドーナツ 半円ドーナツグラフ。 |
| 5 | ドリルダウンでパイ ドリルダウン機能付きの円グラフ。 |
| 6 | グラデーションの円グラフ グラデーション塗りつぶしの円グラフ。 |
| 7 | モノクロの円グラフ モノクロ塗りつぶしの円グラフ。 |
散布図は、散布図に基づくグラフを描画するために使用されます。このセクションでは、さまざまなタイプのスキャッターベースのチャートについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 散布図 散布図。 |
バブルチャートは、バブルベースのチャートを描画するために使用されます。このセクションでは、さまざまなタイプのバブルベースのチャートについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | バブルチャート バブルチャート。 |
| 2 | 3Dバブルチャート 3Dバブルチャート。 |
動的チャートは、チャートのレンダリング後にデータが変更される可能性があるデータベースのチャートを描画するために使用されます。このセクションでは、さまざまなタイプの動的チャートについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | スプラインは毎秒更新されます スプラインチャートは毎秒更新されます。 |
| 2 | クリックしてポイントを追加 ポイント追加機能付きチャート。 |
組み合わせチャートは、混合チャートを描画するために使用されます。たとえば、棒グラフと円グラフ。このセクションでは、さまざまなタイプの組み合わせチャートについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 列、線、円 列、線、円のグラフ。 |
| 2 | 二重軸、線と列 二重軸、線および列のグラフ。 |
| 3 | 複数の軸 複数の軸を持つチャート。 |
| 4 | 回帰直線で散布図 回帰直線のある散布図。 |
3Dチャートは、3次元チャートの描画に使用されます。このセクションでは、さまざまなタイプの3Dグラフについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 3Dカラム 3D縦棒グラフ。 |
| 2 | nullの3D列 null値と0値の3D縦棒グラフ。 |
| 3 | スタッキングのある3Dカラム 積み重ねとグループ化を含む3D縦棒グラフ。 |
| 4 | 3Dパイ 3D円グラフ。 |
| 5 | 3Dドーナツ 3Dドーナツグラフ。 |
角度ゲージチャートは、メーター/ゲージタイプのチャートを描画するために使用されます。このセクションでは、さまざまなタイプの角度ゲージチャートについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | 角度ゲージ 角度ゲージチャート。 |
| 2 | ソリッドゲージ ソリッドゲージチャート。 |
| 3 | 時計 時計。 |
| 4 | 二軸ゲージ 二軸のゲージチャート。 |
| 5 | VUメーター VUメーターチャート。 |
ヒートマップチャートは、ヒートマップタイプのチャートを描画するために使用されます。このセクションでは、さまざまなタイプのヒートマップについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | ヒートマップ ヒートマップ。 |
| 2 | 大きなヒートマップ 大きなヒートマップ。 |
ツリーマップチャートは、ツリーマップタイプのチャートを描画するために使用されます。このセクションでは、さまざまなタイプのツリーマップについて説明します。
| シニア番号 | チャートの種類と説明 |
|---|---|
| 1 | ツリーマップ 色軸のあるツリーマップ。 |
| 2 | レベルのあるツリーマップ レベル付きのツリーマップ。 |
| 3 | 大きなツリーマップ 大きなツリーマップ。 |