<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.charts3d.Column3DComposer">
<charts id="chart" type="column" title="Sold passenger cars in Norway by brand, January 2021"/>
<grid style="margin:50px; margin-top:20px" width="350px">
<columns>
<column align="center" hflex="7"></column>
<column hflex="15"></column>
<column hflex="3"></column>
</columns>
<rows>
<row>
<label>Alpha Angle</label>
<slider id="sliderA" minpos="0" maxpos="45" step="1" />
<label id="valA">15</label>
</row>
<row>
<label>Beta Angle </label>
<slider id="sliderB" minpos="0" maxpos="45" step="1" />
<label id="valB">15</label>
</row>
</rows>
</grid>
</window>
package demo.charts3d;
import org.zkoss.chart.Charts;
import org.zkoss.chart.Series;
import org.zkoss.chart.Subtitle;
import org.zkoss.chart.Tooltip;
import org.zkoss.chart.options3D.Options3D;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Label;
import org.zkoss.zul.Slider;
import org.zkoss.zul.Window;
public class Column3DComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
@Wire
Slider sliderA;
@Wire
Slider sliderB;
@Wire
Label valA;
@Wire
Label valB;
private boolean _animation = true;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
chart.setSubtitle("Source: " +
"<a href=\"https://ofv.no/registreringsstatistikk\"" +
"target=\"_blank\">OFV</a>");
Options3D opt3d = chart.getOptions3D();
opt3d.setEnabled(true);
opt3d.setAlpha(15);
opt3d.setBeta(15);
opt3d.setDepth(50);
opt3d.setViewDistance(25);
chart.getXAxis().setCategories("Toyota", "BMW", "Volvo", "Audi", "Peugeot", "Mercedes-Benz",
"Volkswagen", "Polestar", "Kia", "Nissan");
chart.getYAxis().setTitle("");
Tooltip tooltip = chart.getTooltip();
tooltip.setHeaderFormat("<b>{point.key}</b><br>");
tooltip.setPointFormat("Cars sold: {point.y}");
chart.getLegend().setEnabled(false);
chart.getPlotOptions().getColumn().setDepth(25);
Series series = chart.getSeries();
series.setColorByPoint(true);
series.setData(1318, 1073, 1060, 813, 775, 745, 537, 444, 416, 395);
initSlider();
}
public void initSlider() {
sliderA.setCurpos(15);
sliderB.setCurpos(15);
}
@Listen("onScroll = slider#sliderA")
public void updateValueA() {
if (_animation == true) {
chart.getSeries(0).setAnimation(false);
_animation = false;
}
int curPosA = sliderA.getCurpos();
chart.getChart().getOptions3D().setAlpha(curPosA);
valA.setValue(new Integer(curPosA).toString());
}
@Listen("onScroll = slider#sliderB")
public void updateValueB() {
if (_animation == true) {
chart.getSeries(0).setAnimation(false);
_animation = false;
}
int curPosB = sliderB.getCurpos();
chart.getChart().getOptions3D().setBeta(curPosB);
valB.setValue(new Integer(curPosB).toString());
}
}