<?xml version="1.0" encoding="UTF-8"?>


<window apply="demo.charts3d.Pie3DComposer">
	<charts id="chart" type="pie" title="Global smartphone shipments market share, Q1 2022" />
</window>

package demo.charts3d;

import org.zkoss.chart.Charts;
import org.zkoss.chart.Point;
import org.zkoss.chart.Series;
import org.zkoss.chart.options3D.Options3D;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.chart.plotOptions.PiePlotOptions;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;


public class Pie3DComposer extends SelectorComposer<Window> {

	@Wire
	Charts chart;
	
	public void doAfterCompose(Window comp) throws Exception {
		super.doAfterCompose(comp);
		
		Options3D opt3d = chart.getOptions3D();
		opt3d.setEnabled(true);
		opt3d.setAlpha(45);
		opt3d.setBeta(0);

		chart.setSubtitle("Source: " +
				"<a href=\"https://www.counterpointresearch.com/global-smartphone-share/\"" +
				"target=\"_blank\">Counterpoint Research</a>");

		chart.getAccessibility().getPoint().setValueSuffix("%");

		chart.getTooltip().setPointFormat("{series.name}: <b>{point.percentage:.1f}%</b>");
		PiePlotOptions pot = chart.getPlotOptions().getPie();
		pot.setAllowPointSelect(true);
		pot.setCursor("pointer");
		pot.setDepth(35);
		
		DataLabels dls = pot.getDataLabels();
		dls.setEnabled(true);
		dls.setFormat("{point.name}");
		
		initSeries();
	}
	
	private void initSeries() {
        Series series = chart.getSeries();
        series.setType("pie");
        series.setName("Share");
        series.addPoint(new Point("Samsung", 23));
        series.addPoint(new Point("Apple", 18));
        Point xaiomi = new Point("Xiaomi", 12);
        xaiomi.setSelected(true);
        xaiomi.setSliced(true);
        series.addPoint(xaiomi);
        series.addPoint(new Point("Oppo*", 9));
        series.addPoint(new Point("Vivo", 8));
        series.addPoint(new Point("Others", 30));
	}
}