_)mどうもこんにちわ!マツウラです。Chartの基本的な使い方についてです。Chartsはサイト上のデータ可視化に最適な方法を提供しています。シンプルな折れ線グラフから複雑な階層ツリーマップまで、チャートギャラリーではスグに使えるグラフが多数用意されています。一般的な使用方法はWebページに埋め込むJavaScriptです。いくつかのライブラリを読み込み、グラフ化するデータを列挙し、カスタマイズのオプションを選び、選択したIDを持つグラフオブジェクトを作成します。Chartが表示されます。Androidの移植性、クロスブラウザの互換性を提供するためHTML5/SVGを用いてレンダリングされます。これによりユーザーがプラグインやその他のソフトウェアと干渉することはありません。Chartでは、どのグラフでもDataTableクラスを用いてデータが入力されています。これで簡単にグラフを切り替えて理想的な外観にすることを可能にしています。今回は、グラフの表示するデータを持つことになるDataTableについてです。注意事項まずはじめに1つ注意事項です。JavaScriptのArrayで配列末尾のコンマを処理しないブラウザが一部あります。使用しないでください。配列の途中で空の値として使用する分には問題ありません。3番目の値はundefinedです。ClassDataTableは変更可能な2次元テーブルです。DataTableのread-onlyなコピーを作成するには、DataViewを作成します。DataViewは特定の値や、列・行のみを表示するようなフィルタリングが可能です。(DataViewについては次回でまた。)各列はデータ型に加えて、ID、ラベル、パターン文字列を含むいくつかのオプションプロパティが割り当てられます。加えて、任意のセル、行、列、またはテーブル全体にカスタムプロパティ(name/valueのペア)を割り当てることができます。いくつかの視覚エフェクトがカスタムプロパティによってサポートされています。Tableでは'style'と呼ばれるCellのプロパティをサポートしており、描画されたテーブルセルにインラインスタイルのCSSを適用することができます。視覚エフェクトではサポートするすべてのカスタムプロパティについて入力する必要があります。テーブル初期化に使用されるデータです。DataTable.toJSON()により返されるJSONを使用することができます。(一般的なテーブル、またはテーブル初期化に使用したデータを格納しているJavaScriptオブジェクトから呼べます)このパラメータが指定されていない場合、新しい空のテーブルが返されます。ワイヤプロトコル(データフォーマットの記述)のバージョンを数値で指定します。Datasourceの実装者によってのみ使用されます。現在(2014/05/26)のバージョンは0.6です。DataTableについてDataTableオブジェクトは可視化の際に渡されたデータを保持するために使用されます。基本的な2次元テーブルであり、各列のすべてのデータは同じデータ型です。各列は自身のデータ型、列のラベル、IDを含むディスクリプタを持ち、特定の列を参照するために使用することができます(列インデックスの代わりに)。プロパティについてまた、任意のプロパティ(特定の値、行、列、またはDataTable全体に割り当てられた)のmapをサポートしています。APIでは追加機能をサポートするためこれらを使用することができます。Tableの視覚エフェクトでは個々のセルに任意のクラス名やスタイルを適用するためカスタムプロパティを使用しています。セルについてテーブルの各セルは値を持ち、null値または列で指定された型の値を持つことができます。セルは必要に応じてデータの"formatted"バージョンを取ることができます。これはデータの文字列バージョンであり、可視化の際に表示するためフォーマットされたものです。APIは表示用にフォーマットされたバージョンを使用することができますが、任意のソートや計算(グラフの点配置など)にはデータ自身を常に使用します。highのフォーマットした値を適用するなどです。データの追加と削除コンストラクタを呼んだ後で行を追加するには、単一行ならaddRow()、複数行ならaddRows()を呼びます。列の追加はaddColumn()メソッドを呼びます。列や行を削除する方法も当然ありますが、実際に削除するよりも、DataTableの選択したビューについてDataViewを作成する方法を検討してください。データの変更を反映させるAPIのdraw()メソッドに渡した後でDataTableの値を変更しても、チャートはすぐに変更されません。変更を反映させるには再度draw()を呼ぶ必要があります。サンプル次の2つの例では、同じデータを文字列リテラルでDataTableインスタンスを作成しています。(共通部分は省略してます。Sampleどちらの表記でDataTableを作成すべきか?手作業でコードを入力できる。小さなテーブルである(セルの数が1000個など)。addRows()などのメソッドを使用することでその2のような可読性の高いコードが書けます。次のオブジェクトリテラル表記よりは遅くなりますが、小さなテーブルであれば差は気づかないでしょう。大きなテーブルである(セルの数が巨大)。この条件ではオブジェクトリテラル表記をその1のように使用して直接DataTableオブジェクトを宣言した方がより高速に動作します。正確に記述するには少々癖のある構文です。エラーの可能性を可能な限り低くできる環境を整えられるのであればオブジェクトリテラル構文を使っても良いのではないでしょうか。表記について詳しくはこちらを御覧ください。今回はデータをDataTableに入れてグラフを表示する、基本中の基本を見てきました。次回は特定のデータのみを表示する際に用いるDataViewについて見てゆこうと思います。(2)月別アーカイブリンクはてなブログブログをはじめる週刊はてなブログはてなブログPro参加グループプログラミングテクノロジーはてなブログをはじめよう!knightsoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。