- 棒グラフ
- 折れ線グラフ
- エリアグラフ
- 積み上げ棒グラフ
- 積み上げエリアグラフ
- ウォータフォールグラフ
データは降雨量ですので意味不明なグラフもありますがご愛嬌ということで(^^
<?xml version="1.0" encoding="UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.seasar.DelegatingVariableResolver"?>
<zk xmlns="http://www.zkoss.org/2005/zul" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd ">
<window title="東京 年間降雨量デモ" width="500px" border="normal">
<vbox>
<chart id="myChart" title="月別降雨量 (mm)" width="500" height="250" type="bar" threeD="false" fgAlpha="128"/>
<radiogroup>
<radio label="棒グラフ" id="bar" onCheck="myChart.type=self.id" checked="true"/>
<radio label="折れ線グラフ" id="line" onCheck="myChart.type=self.id" />
<radio label="エリアグラフ" id="area" onCheck="myChart.type=self.id" />
<radio label="積み上げ棒グラフ" id="stacked_bar" onCheck="myChart.type=self.id" />
<radio label="積み上げエリアグラフ" id="stacked_area" onCheck="myChart.type=self.id" />
<radio label="ウォータフォール" id="waterfall" onCheck="myChart.type=self.id" />
</radiogroup>
<checkbox label="3D チャート" checked="false" onCheck="myChart.setThreeD(self.isChecked())"/>
</vbox>
<zscript>
model = new SimpleCategoryModel();
model.clear();
// 年を指定して降雨量をセット
void processYear(String year) {
rainStats = rainStatsService.selectAll(year);
for(data: rainStats){
model.setValue(year, data.month, data.rainfall);
}
}
processYear("2003");
processYear("2004");
processYear("2005");
myChart.setModel(model);
</zscript>
</window>
</zk>
0 件のコメント:
コメントを投稿