Highcharts-java 散点图生成及美化_java 类似plot的散点图

散点图

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

1、效果示例

2、java代码实现

2.1 散点图封装类

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Chart.ZoomType;
import org.moxieapps.gwt.highcharts.client.ChartTitle;
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.Legend.Layout;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.Series.Type;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.plotOptions.Marker;
import org.moxieapps.gwt.highcharts.client.plotOptions.ScatterPlotOptions;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.Widget;
/** 散点图*/
public class ScatterChart implements IsWidget{
	protected Chart chart = null;
	int W;int H;
	public ScatterChart(int w, int h) {
		W = w; H = h;
	}
	public Chart createChart(String chartName, String xName, String yName) {
		chart = new Chart()
				.setSize(W, H)
				.setType(Type.SCATTER)
				.setZoomType(ZoomType.X_AND_Y)
				.setMargin(40, 40, 50, 60)
				.setExporting(new Exporting().setEnabled(false));
		chart.setChartTitle(new ChartTitle().setText(chartName));
		//添加图例并居中
		chart.setLegend(new Legend()
				.setLayout(Layout.HORIZONTAL)
				.setAlign(Align.CENTER)
				.setY(50)
				.setVerticalAlign(org.moxieapps.gwt.highcharts.client.Legend.VerticalAlign.TOP)
				.setFloating(true)
				.setBorderWidth(1));
		chart.setScatterPlotOptions(new ScatterPlotOptions()
				.setHoverStateEnabled(false)
				.setMarker(new Marker()
						.setRadius(5))
						.setHoverStateEnabled(true));
		chart.setToolTip(new ToolTip()
				.setPointFormat("{point.x} cm, {point.y} kg")
				.setHeaderFormat("{series.name}<br>"));
		return chart;
	}
	/**
	 * 添加散点系列数据
	 * @param points
	 * @param name
	 */
	public Series addSeries(Point[] points, String name){
		Series s = chart.createSeries()
						.setName(name)
						.setType(Type.SCATTER)
						.setPoints(points);
		chart.addSeries(s);
		return s;
	}
	@Override
	public Widget asWidget() {
		return chart;
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

2.2 调用类

import com.math.ezone.ezuimodel.client.splinechart.ScatterChart;
import com.sencha.gxt.widget.core.client.Window;
import org.moxieapps.gwt.highcharts.client.Point;
import java.util.Date;
import java.util.Random;
/**散点图表面板*/
public class ScatterChartWindow extends Window{
	public static final long hour = 60*60*1000;
	public static final long day = hour*24;
	private int w,h;
	private ScatterChart sc;
	long strartTime;
	public ScatterChartWindow(int w,int h) {
		this.w = w;
		this.h = h;
		this.setPixelSize(w, h);
		Date d = new Date();
		strartTime = new Date(d.getYear(),d.getMonth(),d.getDate()+1).getTime();
	}
	public ScatterChartWindow createChat(){
		this.setTitle("测试散点图");
		sc = new ScatterChart(w, h-40);
		sc.createChart("按性别划分的身高体重图", "身高(cm)", "体重(kg)");
		this.add(sc);
		addLine();
		return this;
	}
/**构造测试数据并添加进入散点图*/
	public void addLine(){
		Point[] points = new Point[40];
		Random r = new Random();
		for(int i = 0;i<40;i++){
			points[i] = new Point(r.nextInt(20)+130, r.nextInt(15)+40).setColor("rgba(223, 83, 83, .5)");
		}
		sc.addSeries(points, "女");
		points = new Point[40];
		for(int i = 0;i<40;i++){
			points[i] = new Point(r.nextInt(30)+140, r.nextInt(15)+50).setColor("rgba(119, 152, 191, .5)");
		}
		sc.addSeries(points, "男");
	}
	
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43