バブルに画像を使用する

クイックスタートの例に機能を追加して、symbol オブジェクトを含む markers を追加できます。このオブジェクトには、Series内の各バブル像リソースへのリンクが含まれます。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを以下のスクリプトに置き換えます。このスクリプトは次の操作を実行します。

Y 軸のタイトルを設定し、X 軸に次のオプションを設定します。
- X 軸のタイトルテキストは "Monthly Kibble Cost per Pet"。
- X 軸ラベルは、注釈の書式に C0（小数点以下なしの通貨）を使用します。
chartLabel を各バブルの外側に移動し、C0（小数点以下なしの通貨）を使用するように chartLabelFormatString を設定します。
header テキスト属性を使用してチャートにタイトルを追加します。
ツールチップテキスト（hint）に Y 値の代わりに Y1 値を表示し、C0 を使用して値を書式設定します。
X 軸のラベルが密集しないように、凡例を非表示にします。
画像が大きく表示されるように、チャート領域の minimumSize を 10%、maximumSize を 50% に設定します。
次のプロパティを使用して、seriesListに３つの系列を作成します。
- ツールチップで使用されるラベルは、ペットのタイプを表示します。
- Y 軸は、ペットの種類ごとの頭数（百万単位）を示します。
- X 軸は、ペットの種類ごとの毎月のペットフードの費用を示します。
- Y1 値は、ペットの種類ごとの毎月のペットフードの市場規模に基づいて、バブルのサイズを設定します。
- 各系列の markers では、symbol を使用して、ペットの種類に対応する画像の URL を指定します。(各系列にはデータバブルが１つしかないので、symbol にインデックスを設定する必要はありません。)

ドロップダウンからコードを貼り付けます

図のサイズを 500px×400px に拡大したりしない限り、HTML ファイルの <body> セクションを変更する必要はありません。
HTML ファイルを保存し、ブラウザで開きます。チャートは次のようになり、バブルの位置に画像が配置されます。

関連トピック

参照