jQuery Visualizeサンプル集

jQuery Visualizeサンプル集です。今後どんどん追加する予定です。よろしくお願いします。

jQuery Visualize サンプル1(デフォルト:棒グラフ)
まずはデフォルトで用意されたグラフを表示してみる。

jQuery Visualize サンプル2(折れ線グラフ1)
折れ線グラフの作成

jQuery Visualize サンプル3(折れ線グラフ2)
折れ線グラフの作成。サンプル2と異なり、折れ線の下部に色が塗られる。

jQuery Visualize サンプル4(円グラフ)
円グラフの作成。

jQuery Visualize サンプル5(棒グラフ)
棒グラフの作成。デフォルトが棒グラフのため、サンプル1と出力結果は同じ。敢えて棒グラフの指定をした場合のサンプル。

jQuery Visualize サンプル6(テーマの指定)
Lightテーマを用いて全種類のグラフ(棒グラフ、折れ線グラフ(2種類)、円グラフ)を作成。

jQuery Visualize サンプル7(グラフサイズの指定)
widthオプション、heightオプションを用いることで様々なサイズのグラフを作成。

jQuery Visualize サンプル8(グラフ要素の色の指定)
colorsオプションを用いることでグラフ要素の色を指定する。

jQuery Visualize サンプル9(表を非表示にする)
グラフのデータ元となる表(table要素)を非表示にするサンプル。

解説ページ

jQuery Visualizeで洗練されたデザインのグラフの作成
jQuery Visualizeのダウンロードから基本的な使い方までを説明。サンプル1の解説もこちら。

jQuery Visualizeで様々な種類のグラフを作成
グラフの種類の指定方法を記載。サンプル2~5の解説。

jQuery Visualizeのテーマの指定方法(Dark・Light)
グラフのテーマを指定。一度に複数の種類のグラフも作成した。サンプル6の解説。

jQuery Visualizeのグラフサイズの指定方法(width、heightオプション)
グラフサイズの指定方法を記載。サンプル7の解説。

jQuery Visualizeのグラフ要素の色の指定方法(colorsオプション)
グラフ要素の色の指定方法を記載。サンプル8の解説。

jQuery Visualizeでグラフのデータ元である表を非表示にする方法
グラフのデータ元となる表(table要素)を非表示にする方法を記載。サンプル9の解説。

開発サンプル集トップに戻る