Charts(グーグルチャート)があります。Chartsを利用し、サイト内にグラフを表示する簡単な例となります。Chartsを利用して次のような円グラフを作成しています。以下、グラフを作成するソースコードの例となり、HTMLファイルに記述します。ライブラリローダーの読み込み・スクリプトの部分は、bodyの最後に追加しても機能します。Chartsを利用したコードについて以下、上記ソースコードの説明となります。Chartライブラリを利用するため、ライブラリローダーを読み込んでいます。上記ソースコードでは1行目からの次の箇所となります。Chartライブラリを読み込み、その後にグラフを描画する関数を実行します。上記ソースコードでは6行目からの次の箇所となります。Chartsのパッケージを読み込むには、google.charts.loadメソッドを利用します。メソッドの引数は以下となります。第1引数は、バージョンを指定します。'current'を指定すると、最新の公式バージョンとなります。Chartsのパッケージ設定をオブジェクトで指定します。パッケージの種類を指定するには、オブジェクトのキーを'packages'として値を配列で指定します。例では、値を'corechart'と指定しています。バブル・パイ・ドーナツ・コンボ・ローソク足・ヒストグラム・散布図を描画できます。第2引数のオブジェクトで指定できる設定は、その他にもあります。詳しくは文末の参考サイト内を確認してみてください。Chartsのパッケージを読み込んだ後に実行する必要があり、その方法はいくつかあります。今回は、google.charts.loadメソッドが返すPromiseを利用しているため、thenメソッドの引数にグラフを描画する関数を指定し、関数を実行しています。グラフの設定・描画を行う関数を作成グラフの設定・描画を行う関数を作成します。上記ソースコードでは13行目からの次の箇所となります。options);}グラフで利用するデータ・オプションを設定グラフで利用するデータを定義する方法はいくつかありますが、今回はgoogle.visualization.DataTableクラスのインスタンスを利用しています。グラフのデータの定義にはインスタンスのメソッドを利用します。グラフの種類によって指定するデータは異なり、例では、円グラフ用のデータを指定しています。グラフにはオプションをオブジェクトで指定することもできます。例では、グラフのタイトル・高さ・幅をオプションで設定しています。グラフのデータ・オプションを設定する方法の詳細は、以下のリンク先を参考にしてみてください。Charts】縦棒グラフを描画する例|データ・オプションの設定方法グラフを描画するためのインスタンスを作成グラフを描画するには、まず、グラフの種類によって異なるインスタンスを作成します。そのインスタンスの引数は、グラフを表示するHTML要素を指定するため、要素にアクセスするメソッドとなります。例では、円グラフを描画するgoogle.visualization.PieChartクラスのインスタンスを作成し、引数にはidの属性値に'google_chart'をもつ要素にアクセスするメソッドを指定します。グラフの描画はインスタンスのdrawメソッドで行います。その際に、drawメソッドの第1引数にグラフのデータを、第2引数にオプションを指定します。グラフを表示するHTMLの要素を追加グラフを表示するにはHTMLの要素を追加します。例では、上記で設定したように、idの属性値に'google_chart'を持つ要素内にグラフを表示しています。上記ソースコードでは41行目からの次の箇所となります。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。