天天看点

android 曲线图的绘制

先上图展示效果

android 曲线图的绘制

本demo还采用了第三方开源控件,achartengine-1.1.0.jar   大家可以自行网上下载

因为原开源代码设计的曲线不支持横坐标为日期  纵坐标为double值,所以在本demo中对其部分方法进行了重写

private int[] store_colors = new int[] { Color.rgb(102, 205, 0),
			Color.rgb(238, 0, 0), Color.rgb(28, 134, 238) }; // 曲线颜色 绿 红 蓝
	private PointStyle[] store_style = new PointStyle[] { PointStyle.CIRCLE,
			PointStyle.SQUARE, PointStyle.TRIANGLE }; // 曲线折点形状:圆、方形、三角形
	private XYMultipleSeriesDataset mDataset = new XYMultipleSeriesDataset();
	private XYMultipleSeriesRenderer mRenderer = new XYMultipleSeriesRenderer();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_achart);
		
		LinearLayout chart = (LinearLayout) findViewById(R.id.chart);

		String[] titles = new String[] { "数值", "上限值", "下限值" }; // 名称、上限、下限 三条曲线
		List<Date[]> x = new ArrayList<Date[]>(); // 存放x轴的参数
		Date[] index = new Date[30];
		// x轴参数添加
		for (int j = 0; j < 30; j++) {
			index[j] = new Date(2015 - 1900, 5 - 1, 1 + j, 5, 11);
		}
		// 3条线一致
		for (int i = 0; i < 3; i++) {
			x.add(index); // 横坐标
		}
		//
		List<double[]> values = new ArrayList<double[]>();
		double[] yValues1 = new double[30];
		double[] yValues2 = new double[30];
		double[] yValues3 = new double[30];
		for (int i = 0; i < 30; i++) {
			yValues1[i] = i;
			yValues2[i] = 40; // 上限
			yValues3[i] = -1; // 下限
		}
		values.add(yValues1);
		values.add(yValues2);
		values.add(yValues3);
		// 曲线颜色
		int[] colors = new int[3];
		// 将预设的颜色加入本次曲线图
		for (int i = 0; i < 3; i++) {
			colors[i] = store_colors[i];
		}

		// 折点形状
		PointStyle[] styles = new PointStyle[3];
		// 将预设的形状加入本次曲线图
		for (int i = 0; i < 3; i++) {
			styles[i] = store_style[i];
		}
		mRenderer = buildRenderer(colors, styles);
		// ---------------------------------------------------------------------------------------------------------------
		mRenderer.setXLabels(9); // x轴默认显示9格
		mRenderer.setYLabels(5);
		mRenderer.setShowGrid(true);
		mRenderer.setXLabelsAlign(Align.RIGHT);
		mRenderer.setYLabelsAlign(Align.RIGHT);
		mRenderer.setXLabelsAngle(-25); // 倾斜角度
		mRenderer.setGridColor(Color.BLACK); // 网格线颜色
		mRenderer.setLabelsColor(Color.BLACK); // 标题颜色
		mRenderer.setXLabelsColor(Color.BLACK); // 横坐标刻度文本颜色
		mRenderer.setYLabelsColor(0, Color.BLACK);// 纵坐标刻度文本颜色
		mRenderer.setAxesColor(Color.WHITE); // 坐标轴颜色
		mRenderer.setLabelsTextSize(18);// 刻度字体大小
		mRenderer.setMarginsColor(Color.WHITE);// 曲线图外背景颜色
		mRenderer.setZoomButtonsVisible(true); // 缩放按钮
		mRenderer.setPanEnabled(true, false); // X Y轴是否可移动
		mRenderer.setYAxisMax(42); // 设置默认显示y轴最大值
		mRenderer.setYAxisMin(-3);// 设置默认显示y轴最小值
		mRenderer.setInScroll(true); // 可以在scrollView中显示
		// mRenderer.setZoomInLimitY();
		int n = 30;
		// 设置xy轴的最大显示范围
		mRenderer.setZoomLimits(new double[] {
				x.get(0)[0].getTime()
						- (x.get(0)[n - 1].getTime() - x.get(0)[0].getTime())
						* 1.5,
				x.get(0)[n - 1].getTime()
						+ (x.get(0)[n - 1].getTime() - x.get(0)[0].getTime())
						/ 2, -2, 42 });
		mRenderer.setClickEnabled(true);
		mDataset = buildDataset(titles, x, values);      
		int length = mRenderer.getSeriesRendererCount();
		for (int i = 0; i < length; i++) {
			if (i == 1 || i == 2) {
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setFillPoints(false); // 点实心
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setDisplayChartValues(false); // 警戒线不显示数值
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setPointStrokeWidth((float) 0.1);
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setLineWidth(5); // 线宽
			} else {
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setFillPoints(true);
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setDisplayChartValues(true);
				((XYSeriesRenderer) mRenderer.getSeriesRendererAt(i))
						.setChartValuesTextSize(22);
			}
		}

		setChartSettings(mRenderer, "标题", "", "", x.get(0)[0].getTime(),
				x.get(0)[8].getTime(), -2, 41, Color.LTGRAY, Color.LTGRAY);
		GraphicalView mChartView = ChartFactory.getTimeChartView(
				getBaseContext(), mDataset, mRenderer, "MM-dd HH:mm"); //定义x轴显示格式
		//将曲线加入布局
		chart.addView(mChartView);           

	}

	private XYMultipleSeriesRenderer buildRenderer(int[] colors,
			PointStyle[] styles) {
		XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
		setRenderer(renderer, colors, styles);
		return renderer;
	}

	private void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors,
			PointStyle[] styles) {
		renderer.setAxisTitleTextSize(16);
		renderer.setChartTitleTextSize(20);
		renderer.setLabelsTextSize(15);
		renderer.setLegendTextSize(15);
		renderer.setPointSize(5f);
		renderer.setMargins(new int[] { 20, 30, 15, 20 });
		int length = colors.length;
		for (int i = 0; i < length; i++) {
			XYSeriesRenderer r = new XYSeriesRenderer();
			r.setColor(colors[i]);
			r.setPointStyle(styles[i]);
			renderer.addSeriesRenderer(r);
		}
	}

	private void setChartSettings(XYMultipleSeriesRenderer renderer,
			String title, String xTitle, String yTitle, double xMin,
			double xMax, double yMin, double yMax, int axesColor,
			int labelsColor) {
		renderer.setChartTitle(title);
		renderer.setXTitle(xTitle);
		renderer.setYTitle(yTitle);
		renderer.setXAxisMin(xMin);
		renderer.setXAxisMax(xMax);
		renderer.setYAxisMin(yMin);
		renderer.setYAxisMax(yMax);
		renderer.setAxesColor(axesColor);
		renderer.setLabelsColor(labelsColor);
	}

	private XYMultipleSeriesDataset buildDataset(String[] titles,
			List<Date[]> xValues, List<double[]> yValues) {
		XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
		int length = titles.length;
		for (int i = 0; i < length; i++) {
			TimeSeries series = new TimeSeries(titles[i]);
			Date[] xV = xValues.get(i);
			double[] yV = yValues.get(i);
			int seriesLength = xV.length;
			for (int k = 0; k < seriesLength; k++) {
				series.add(xV[k], yV[k]);
			}
			dataset.addSeries(series);
		}
		return dataset;
	}
           

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:layout_marginTop="100dp"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="horizontal"
        android:id="@+id/chart"
        />

</LinearLayout>