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