java - (highCharts)饼图生成及美化

一、基本饼图

参考Highcharts官网.
本次我们来介绍一下如何通过封装的highcharts jar包，来实现java端饼图的生成及美化。

1、效果示例

2、java代码实现

2.1 饼图封装类

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Exporting;
import org.moxieapps.gwt.highcharts.client.Legend;
import org.moxieapps.gwt.highcharts.client.Legend.Align;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions.Cursor;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;
/** 饼图封装类*/
public class PieChart implements IsWidget{
	protected Chart chart = null;
	int W;int H;
	public PieChart(int w, int h) {
		W = w; H = h;
	}
	public Chart createChart(String chartName, String xName, String yName) {
		chart = new Chart()
				.setSize(W, H)
				.setType(Series.Type.PIE)
				.setMargin(40, 40, 50, 60)
				.setChartTitleText(chartName)
				.setExporting(new Exporting().setEnabled(false))
				.setLegend(new Legend().setAlign(Align.CENTER));
		chart.setPiePlotOptions(new PiePlotOptions()
				.setAllowPointSelect(true)
				.setCursor(Cursor.POINTER)
				.setShowInLegend(true)
				.setPieDataLabels(new PieDataLabels()
						.setEnabled(true)
						.setFormat("<b>{point.name}</b>: {point.percentage:.1f} %")));
		chart.setToolTip(new ToolTip().setPointFormat("{series.name}: <b>{point.percentage:.1f}%</b>"));
		return chart;
	}
	/** 添加扇形区 */
	public Series addSeries(Point[] points, String name,String color){
		Series s = chart.createSeries()
						.setPoints(points)
						.setName(name);
		chart.addSeries(s);
		return s;
	}
	@Override
	public Widget asWidget() {
		return chart;
	}
}

2.2 调用类

import org.moxieapps.gwt.highcharts.client.Point;
import com.math.ezone.ezuimodel.client.splinechart.PieChart;
import com.sencha.gxt.widget.core.client.Window;
public class PieChartWindow extends Window{
	public static final long hour = 60*60*1000;
	public static final long day = hour*24;
	private int w,h;
	private PieChart sc;
	public PieChartWindow(int w,int h) {
		this.w = w;
		this.h = h;
		this.setPixelSize(w, h);
	}
	public PieChartWindow createChat(){
		this.setTitle("测试饼图生成");
		this.setHeadingText("测试饼图生成");
		sc = new PieChart(w, h-40);
		//可传入实际数据-这里仅用于测试
		sc.createChart("测试饼图生成", "x轴数据", "y轴数据");
		this.add(sc);
		addSeries();
		return this;
	}
	/**构造测试数据-并添加扇形区*/
	public void addSeries(){
		//构造数据-》实际可通过传入数据添加
		Point[] points = new Point[6];
		points[0] = new Point(0, 30).setName("苹果").setSliced(true).setSelected(true);
		points[1] = new Point(0, 20).setName("梨子").setSliced(true).setSelected(true);
		points[2] = new Point(0, 40).setName("香蕉").setSliced(true).setSelected(true);
		points[3] = new Point(0, 10).setName("橙子").setSliced(true).setSelected(true);
		points[4] = new Point(0, 15).setName("柚子").setSliced(true).setSelected(true);
		points[5] = new Point(0, 12).setName("荔枝").setSliced(true).setSelected(true);
		sc.addSeries(points, "水果占比","");
	}
}

二、标题居中的环形图

1 效果示例

2、代码封装

2.1中对应createChart()函数，封装为createRingChart()如下所示：

public Chart createRingChart(String chartName, String xName, String yName) {
		chart = new Chart()
				.setSize(W, H)
				.setType(Series.Type.PIE)
				.setMargin(40, 40, 50, 60)
				.setChartTitleText(chartName)
				.setExporting(new Exporting().setEnabled(false))
				.setLegend(new Legend().setAlign(Align.CENTER));
		chart.setPiePlotOptions(new PiePlotOptions()
				.setAllowPointSelect(true)
				.setCursor(Cursor.POINTER)
				.setShowInLegend(true)
				.setPieDataLabels(new PieDataLabels()
						.setEnabled(true)
						.setFormat("<b>{point.name}</b>: {point.percentage:.1f} %")));
		chart.setToolTip(new ToolTip().setPointFormat("{series.name}: <b>{point.percentage:.1f}%</b>"));
		return chart;
	}

然后修改2.2.中的调用即可