JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


Googleチャート

単純な折れ線グラフから複雑な階層ツリーマップまで、Google Chartギャラリーには、すぐに使用できる多数のグラフタイプが用意されています。

  • 散布図
  • 折れ線グラフ
  • 棒グラフ/縦棒グラフ
  • 面グラフ
  • 円グラフ
  • ドーナツチャート
  • 組織図
  • 地図/地理チャート

Google Chartの使い方は?

ウェブページでGoogleチャートを使用するには、チャートローダーへのリンクを追加します。

<script
src="https://www.gstatic.com/charts/loader.js">
</script>

GoogleChartは使いやすいです。

チャートを表示するには、 <div>要素を追加するだけです。

<div id="myChart" style="max-width:700px; height:400px"></div>

<div>要素には一意のIDが必要です。

次に、Google GraphAPIをロードします。

  1. VisualizationAPIとコアチャートパッケージをロードします
  2. APIがロードされたときに呼び出すコールバック関数を設定します
1 google.charts.load('current',{packages:['corechart']});

2 google.charts.setOnLoadCallback(drawChart);

それで全部です!


折れ線グラフ

House Prices vs. Size60801001201400.02.55.07.510.012.515.0Square MetersPrice in Millions
価格サイズ
507
608
708
809
909
1009
11010
12011
13014
14014
15015

ソースコード

function drawChart() {
// Set Data
var data = google.visualization.arrayToDataTable([
  ['Price', 'Size'],
  [50,7],[60,8],[70,8],[80,9],[90,9],[100,9],
  [110,10],[120,11],[130,14],[140,14],[150,15]
  ]);
// Set Options
var options = {
  title: 'House Prices vs Size',
  hAxis: {title: 'Square Meters'},
  vAxis: {title: 'Price in Millions'},
  legend: 'none'
};
// Draw Chart
var chart = new google.visualization.LineChart(document.getElementById('myChart'));
chart.draw(data, options);
}


散布図

同じデータを散布図にするには、google.visualizationをScatterChartに変更します。

var chart = new google.visualization.ScatterChart(document.getElementById('myChart'));

House Prices vs. Size0501001500.02.55.07.510.012.515.0Square MetersPrice in Millions
価格サイズ
507
608
708
809
909
1009
11010
12011
13014
14014
15015

棒グラフ

World Wide Wine ProductionMhl0204060ItalyFranceSpainUSAArgentina
コントリーMhl
イタリア55
フランス49
スペイン44
米国24
アルゼンチン15

ソースコード

function drawChart() {

var data = google.visualization.arrayToDataTable([
  ['Contry', 'Mhl'],
  ['Italy', 55],
  ['France', 49],
  ['Spain', 44],
  ['USA', 24],
  ['Argentina', 15]
]);

var options = {
  title: 'World Wide Wine Production'
};

var chart = new google.visualization.BarChart(document.getElementById('myChart'));
chart.draw(data, options);

}


円グラフ

棒グラフ円グラフに変換するには、

google.visualizationを置き換えます。棒グラフ:google.visualization円グラフ



var chart = new google.visualization.PieChart(document.getElementById('myChart'));

World Wide Wine ProductionItalyFranceSpainUSAArgentina29.4%8%12.8%23.5%26.2%
コントリーMhl
イタリア55
フランス49
スペイン44
米国24
アルゼンチン15

3Dパイ

円を3Dで表示するには、オプションにis3D:trueを追加するだけです。

var options = {
  title: 'World Wide Wine Production',
  is3D: true
};

World Wide Wine ProductionItalyFranceSpainUSAArgentina29.4%8%12.8%23.5%26.2%
コントリーMhl
イタリア55
フランス49
スペイン44
米国24
アルゼンチン15