<?xml version="1.0" encoding="UTF-8"?>
<window apply="demo.bar.ColumnRotatedLabelsComposer">
<charts id="chart" type="column" title="World's largest cities per 2014"
subtitle="Source: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>" />
</window>
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.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 2014: <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", "Shanghai", 23.7);
model.setValue("Population", "Lagos", 16.1);
model.setValue("Population", "Instanbul", 14.2);
model.setValue("Population", "Karachi", 14.0);
model.setValue("Population", "Mumbai", 12.5);
model.setValue("Population", "Moscow", 12.1);
model.setValue("Population", "São Paulo", 11.8);
model.setValue("Population", "Beijing", 11.7);
model.setValue("Population", "Guangzhou", 11.1);
model.setValue("Population", "Delhi", 11.1);
model.setValue("Population", "Shenzhen", 10.5);
model.setValue("Population", "Seoul", 10.4);
model.setValue("Population", "Jakarta", 10.0);
model.setValue("Population", "Kinshasa", 9.3);
model.setValue("Population", "Tianjin", 9.3);
model.setValue("Population", "Tokyo", 9.0);
model.setValue("Population", "Cairo", 8.9);
model.setValue("Population", "Dhaka", 8.9);
model.setValue("Population", "Mexico City", 8.9);
model.setValue("Population", "Lima", 8.9);
}
public static CategoryModel getCategoryModel() {
return model;
}
}