Highcharts-quick-guide
ハイチャート-概要
*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 |
基本的な折れ線グラフ。 |
2 |
データラベル付きのグラフ。 |
3 |
Ajax loaded data, clickable points サーバーからデータを取得した後に描画されたグラフ。 |
4 |
時系列を使用したグラフ。 |
5 |
反転軸を持つスプライングラフ。 |
6 |
熱/雨のシンボルを使用したスプラインチャート。 |
7 |
プロットバンド付きのスプライングラフ。 |
8 |
Time data with irregular intervals 大量の時間ベースのデータのチャート。 |
9 |
対数軸を示すチャート。 |
ハイチャート-エリアチャート
エリアチャートは、エリアベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの面積ベースのチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
基本的な面グラフ。 |
2 |
負の値を持つ面グラフ。 |
3 |
互いに積み上げられた領域を持つグラフ。 |
4 |
パーセンテージでデータを示すグラフ。 |
5 |
データに欠損点があるチャート。 |
6 |
反転軸を使用するエリア。 |
7 |
スプラインを使用した面グラフ。 |
8 |
範囲を使用した面グラフ。 |
9 |
範囲と線を使用した面グラフ。 |
ハイチャート-棒グラフ
棒グラフは、面積ベースのグラフを描くために使用されます。 このセクションでは、さまざまなタイプの棒グラフを説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
基本的な棒グラフ。 |
2 |
棒が積み上げられた棒グラフ。 |
3 |
負のスタックを持つ棒グラフ。 |
ハイチャート-縦棒グラフ
縦棒グラフは、縦棒ベースのグラフを描画するために使用されます。 このセクションでは、さまざまなタイプの列ベースのチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
基本的な縦棒グラフ。 |
2 |
負の値を持つ縦棒グラフ。 |
3 |
列が互いに積み上げられたグラフ。 |
4 |
積み上げおよびグループ化された形式の列を持つグラフ。 |
5 |
Column with stacked percentage 積み上げパーセンテージのグラフ。 |
6 |
列にラベルが回転した縦棒グラフ。 |
7 |
ドリルダウン機能付きの縦棒グラフ。 |
8 |
固定配置の縦棒グラフ。 |
9 |
HTMLテーブルで定義されたデータを使用した縦棒グラフ。 |
10 |
範囲を使用した縦棒グラフ。 |
ハイチャート-円グラフ
円グラフは、円ベースのグラフを描くために使用されます。 このセクションでは、さまざまなタイプの円グラフを説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
基本的な円グラフ。 |
2 |
凡例付きの円グラフ。 |
3 |
ドーナツグラフ。 |
4 |
半円ドーナツグラフ。 |
5 |
ドリルダウン機能付きの円グラフ。 |
6 |
グラデーション塗りつぶし付きの円グラフ。 |
7 |
モノクロ塗りつぶし付きの円グラフ。 |
ハイチャート-散布図
散布図は、散布図に基づいて作成されます。 このセクションでは、さまざまなタイプの散布図に基づいたチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
散布図。 |
ハイチャート-バブルチャート
バブルチャートは、バブルベースのチャートを描画するために使用されます。 このセクションでは、さまざまな種類のバブルベースのチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
バブルチャート。 |
2 |
3Dバブルチャート。 |
ハイチャート-動的チャート
動的なチャートは、チャートのレンダリング後にデータを変更できるデータベースのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプの動的チャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
毎秒更新されるスプラインチャート。 |
2 |
ポイント追加機能を備えたチャート。 |
ハイチャート-組み合わせ
組み合わせチャートは、混合チャートを描画するために使用されます。たとえば、円グラフ付きの棒グラフ。 このセクションでは、さまざまなタイプの組み合わせチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
列、線、および円グラフ。 |
2 |
二重軸、線、および列を持つグラフ。 |
3 |
複数の軸を持つグラフ。 |
4 |
回帰線を含む散布図。 |
ハイチャート-立体チャート
3Dチャートは、3次元チャートを描くために使用されます。 このセクションでは、さまざまなタイプの3Dチャートについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
3D縦棒グラフ。 |
2 |
値がnullおよび0の3D縦棒グラフ。 |
3 |
積み上げとグループ化を含む3D縦棒グラフ。 |
4 |
3D円グラフ。 |
5 |
3Dドーナツグラフ。 |
ハイチャート-角度ゲージ
角度ゲージチャートは、メーター/ゲージタイプのチャートを描画するために使用されます。 このセクションでは、Angular Gaugesチャートのさまざまなタイプについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
角度ゲージチャート。 |
2 |
ソリッドゲージチャート。 |
3 |
クロック。 |
4 |
二重軸のゲージチャート。 |
5 |
VUメーターチャート。 |
ハイチャート-ヒートマップ
ヒートマップチャートは、ヒートマップタイプのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプのヒートマップについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
ヒートマップ。 |
2 |
大きなヒートマップ。 |
ハイチャート-ツリーマップ
ツリーマップチャートは、ツリーマップタイプのチャートを描画するために使用されます。 このセクションでは、さまざまなタイプのツリーマップについて説明します。
Sr.No. | Chart Type & Description |
---|---|
1 |
色軸を持つツリーマップ。 |
2 |
レベル付きのツリーマップ。 |
3 |
大きなツリーマップ。 |