ユーザーがチャートを見て、何か面白いものを発見したとき、ユーザーはその面白いところに関する詳細な情報を見たいでしょう。それはパイチャート中 ではパイ、バーチャートではバー、ラインチャートではポイントです。チャートコンポーネントはドリルダウンファシリティをサポートしていて、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>