グラフをカスタマイズする方法

Google グラフのツールは、デフォルトの設定で使用できます。すべてのカスタマイズは任意であり、基本設定は起動可能です。ただし、デフォルトのスタイルと相反するスタイルを採用しているウェブページでは、グラフを簡単にカスタマイズできます。すべてのグラフには、デザインをカスタマイズするためのオプションがいくつか用意されています。これらのオプションは、グラフの draw() メソッドに渡されるオプション オブジェクトで名前と値のペアとして表されます。

グラフでは通常、その可視化に適したカスタム オプションがサポートされています。たとえば、表グラフではデフォルトの並べ替え列を指定する sortColumn オプションがサポートされており、円グラフではスライスの色を指定できる colors オプションがサポートされています。各グラフのドキュメントでは、サポートされているオプションについて説明しています。

前述のチャートの draw() メソッドに、オプションの 2 番目のパラメータとしてオプションを渡します。オプションを指定するには、各グラフに固有のプロパティを持つオブジェクトを作成します。

次の例は、これらのプロパティをすべて指定するオプション オブジェクトの作成方法を示しています。

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

このコードが作成するグラフを以下に示します。

draw() メソッド内でオプションを直接指定することもできます。

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

このコードが作成するグラフを以下に示します。

詳細情報

• カスタマイズされたブランディングの例
• 表のカスタマイズの例