Home   Single Page

ドリルダウン(onClickイベント)

ユーザーがチャートを見て、何か面白いものを発見したとき、ユーザーはその面白いところに関する詳細な情報を見たいでしょう。それはパイチャート中 ではパイ、バーチャートではバー、ラインチャートではポイントです。チャートコンポーネントはドリルダウンファシリティをサポートしていて、chartをareaコンポーネントに切り分けます。そして、ユーザーがchartをクリックして、onClickMouseイベントを開始します。開発者はareaコンポーネントを配置して、適切なドリルダウンをします。

コンポーネントのcomponentScopeエリア中でいくつかの便利な情報があり、開発者はそれらを使うことができます。

名前

説明

entity

エリアの種類(例:TITLE、DATA、CATEGORY、LEGEND)

series

関連データのシリーズ名(CategoryModel,XYModel,HiLoModel)

category

関連データのカテゴリー名(PieModelかCategoryModel)

url

レガシーページにドリルダウンする文字列中のurl

value

関連データの数値(PieModel又はCategoryModel).

x

関連データのX値(XYModel)

y

関連データのY値(XYModel)

date

関連データのデータ値(HiLoModel)

open

関連データの公開データ(HiLoModel)

high

関連データの高い値(HiLoModel)

low

関連データの低い値(HiLoModel)

close

関連データの閉じた値(HiLoModel)

volume

関連データの容積値(HiLoModel)

以下の例中で、チャート上でonClickイベントリスナを提供します。関連したareaコンポーネントを配置し、areaのカテゴリ(つまり、pieパイ) を表示します。

<chart id="mychart" type="pie" width="400" height="250">
<attribute name="onClick">
alert(self.getFellow(event.getArea()).getAttribute("category"));
</attribute>
<zscript><![CDATA[
PieModel model = new PieModel();
model.setValue("C/C++", new Double(17.5));
model.setValue("PHP", new Double(32.5));
model.setValue("Java", new Double(43.2));
model.setValue("VB", new Double(10.0));
mychart.setModel(model);
]]></zscript>
</chart>