package demo.bar;
import org.zkoss.chart.AxisLabels;
import org.zkoss.chart.Charts;
import org.zkoss.chart.ChartsEvents;
import org.zkoss.chart.Theme;
import org.zkoss.chart.plotOptions.DataLabels;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
public class ColumnRotatedLabelsComposer extends SelectorComposer<Window> {
@Wire
Charts chart;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
chart.setSubtitle("Source: <a href=\"https://worldpopulationreview.com/world-cities\" target=\"_blank\">World Population Review</a>");
chart.setModel(ColumnRotatedLabelsData.getCategoryModel());
AxisLabels xLabels = chart.getXAxis().getLabels();
xLabels.setRotation(-45);
xLabels.setStyle("fontSize: '13px'; fontFamily: 'Verdana, sans-serif'");
chart.getYAxis().setMin(0);
chart.getYAxis().setTitle("Population (millions)");
chart.getLegend().setEnabled(false);
chart.getTooltip().setPointFormat(
"Population in 2021: <b>{point.y:.1f} millions</b>");
DataLabels dataLabels = chart.getSeries().getDataLabels();
dataLabels.setEnabled(true);
dataLabels.setRotation(-90);
dataLabels.setColor("#FFFFFF");
dataLabels.setAlign("right");
dataLabels.setFormat("{point.y:.1f}");
dataLabels.setY(10);
dataLabels.setStyle(
"fontSize: '13px'; fontFamily: 'Verdana, sans-serif';");
chart.addEventListener(0, ChartsEvents.ON_PLOT_THEME_CHANGE, new EventListener() {
public void onEvent(Event event) throws Exception {
Theme theme = chart.getTheme();
if (theme.equals(Theme.DARK_BLUE) || theme.equals(Theme.DARK_GREEN)) {
chart.getSeries().getDataLabels().setColor("brown");
} else {
chart.getSeries().getDataLabels().setColor("#FFFFFF");
}
}
});
}
}
package demo.bar;
import org.zkoss.chart.model.CategoryModel;
import org.zkoss.chart.model.DefaultCategoryModel;
public class ColumnRotatedLabelsData {
private static CategoryModel model;
static {
model = new DefaultCategoryModel();
model.setValue("Population", "Tokyo", 37.33);
model.setValue("Population", "Delhi", 31.18);
model.setValue("Population", "Shanghai", 27.79);
model.setValue("Population", "Sao Paulo", 22.23);
model.setValue("Population", "Mexico City", 21.91);
model.setValue("Population", "Dhaka", 21.74);
model.setValue("Population", "Cairo", 21.32);
model.setValue("Population", "Beijing", 20.89);
model.setValue("Population", "Mumbai", 20.67);
model.setValue("Population", "Osaka", 19.11);
model.setValue("Population", "Karachi", 16.45);
model.setValue("Population", "Chongqing", 16.38);
model.setValue("Population", "Istanbul", 15.41);
model.setValue("Population", "Buenos Aires", 15.25);
model.setValue("Population", "Kolkata", 14.974);
model.setValue("Population", "Kinshasa", 14.970);
model.setValue("Population", "Lagos", 14.86);
model.setValue("Population", "Manila", 14.16);
model.setValue("Population", "Tianjin", 13.79);
model.setValue("Population", "Guangzhou", 13.64);
}
public static CategoryModel getCategoryModel() {
return model;
}
}