组件: chart
chart用于显示以图形方式一组数据。它可以帮助用户以快照(snapshot )形式判断某事物。
使用chart组件非常直观。在数据模型中准备合适的数据且将其送入chart。下面为一个饼图(pie chart)的例子。
<chart id="mychart" type="pie" width="400" height="200" threeD="true" fgAlpha="128">
<zscript><![CDATA[
PieModel model = new SimplePieModel();
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>
不同类型的chart 用于展示不同类型的数据；因此，chart必须提供合适的数据模型。对于饼图，开发人员必须提供PieModel 作为它们的数据模型，而柱状图，线图，面积图和瀑布图 (bar chart，line chart， area chart， and waterfall chart) 需要 CategoryModel 和 XYModel 。
上面的例子有一点点令人误解。实际上，在将数据填充到chart前，开发人员不一定必须准备真实的数据，因为chart组件支持实况数据机制。使用实况数据，开发人员可以从视图分离出数据。换言之，开发人员可以从数据模型添加，更改及移除数据，而chart会根据此刷新。对于一些高级实现，开发人员甚至可以实现org.zkoss.zul.ChartModel接口来提供他们自己的chart模型。
当用户查看一个chart，且发现了一些有趣的东西，很自然的用户会想了解关于兴趣点的详细信息。兴趣点通常会是饼图中的一块，柱状图中的一个条形柱，线图中的一点。chart组件支持这样的向下钻取(drill down)功能，通过自动将chart分割成area组件，然后用户可以点击chart来触发一个onClick鼠标事件。然后，开发人员可以定位area组件，并处理相应的向下钻取(do whatever appropriate drill down)。
在area组件的componentScope内，有一些开发人员可以使用的有用信息。
|
名称 |
描述 |
|---|---|
|
entity |
区域的实体类型。(例如 TITLE, DATA, CATEGORY, LEGEND) |
|
series |
关联数据的连续名称(CategoryModel, XYModel, or HiLoModel)。 |
|
category |
关联数据的类别名称 (PieModel or CategoryModel)。 |
|
url |
字符串类型的url，用于向下钻取一个遗留(legacy)页面。 |
|
value |
关联数据的数值( PieModel or CategoryModel)。 |
|
x |
关联数据的x值 (XYModel)。 |
|
y |
关联数据的y值 (XYModel)。 |
|
date |
关联数据的date值 (HiLoModel)。 |
|
open |
关联数据的open值(HiLoModel)。 |
|
high |
关联数据的high值 (HiLoModel)。 |
|
low |
关联数据的low值 (HiLoModel)。 |
|
close |
关联数据的close值 (HiLoModel)。 |
|
volume |
关联数据的volume值 (HiLoModel)。 |
在下面的例子中，在chart中我们提供了一个onClick事件监听器。它定位area组件并且显示area组件(也就是pie)的分类(category)。
<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>