Android 實時曲線圖/折線圖

基于開源架構AChartEnginee繪制圖表表格，實作顯示資料折線圖，對比功能。效果圖如下：

建立工程

通過Android studio建立項目，添加achartenginee.jar依賴。點選下載下傳jar

初始化圖表

資料集

根據需求設定多條曲線，一條曲線對應一個XYSeries執行個體

series = new XYSeries(title);
		series2 = new XYSeries("123");
		// 建立一個資料集的執行個體，這個資料集将被用來建立圖表
		mDataset = new XYMultipleSeriesDataset();
		// 将點集添加到這個資料集中
		mDataset.addSeries(series);
		mDataset.addSeries(series2);
           

屬性樣式

設定曲線樣式，這裡要注意，一條曲線執行一次如下設定，以順序互相對應，否則将會報錯：Datasetand renderer should not be null  andshould have the same number of series

XYSeriesRenderer r = new XYSeriesRenderer();
		// 設定圖表中曲線本身的樣式，包括顔色、點的大小以及線的粗細等
		r.setColor(color);
		r.setPointStyle(style);
		r.setFillPoints(fill);
		r.setLineWidth(3);
		renderer.addSeriesRenderer(r);
           

設定圖表樣式

// 有關對圖表的渲染可參看api文檔
		renderer.setApplyBackgroundColor(true);
		renderer.setBackgroundColor(getResources().getColor(
				R.color.black));
		renderer.setChartTitle(title);
		renderer.setChartTitleTextSize(20);
		renderer.setLabelsTextSize(19);// 設定坐标軸标簽文字的大小
		renderer.setXTitle(xTitle);
		renderer.setYTitle(yTitle);
		renderer.setXAxisMin(xMin);
		renderer.setXAxisMax(xMax);
		renderer.setYAxisMin(yMin);
		renderer.setYAxisMax(yMax);
		//renderer.setYAxisAlign(Align.RIGHT, 0);//用來調整Y軸放置的位置，表示将第一條Y軸放在右側
		renderer.setAxesColor(axesColor);
		renderer.setLabelsColor(labelsColor);
		renderer.setShowGrid(true);
		renderer.setGridColor(Color.GRAY);
		renderer.setXLabels(10);//若不想顯示X标簽刻度，設定為0 即可
		renderer.setYLabels(10);
		renderer.setLabelsTextSize(18);// 設定坐标軸标簽文字的大小
		renderer.setXLabelsColor(labelsColor);
		renderer.setYLabelsColor(0, labelsColor);
		renderer.setYLabelsVerticalPadding(-5);
		renderer.setXTitle("");
		renderer.setYTitle("");
		renderer.setYLabelsAlign(Align.RIGHT);
		renderer.setAxisTitleTextSize(20);
		renderer.setPointSize((float) 1);
		renderer.setShowLegend(false);
		renderer.setFitLegend(true);
		renderer.setMargins(new int[] { 30, 45, 10, 20 });// 設定圖表的外邊框(上/左/下/右)
		//表格邊框顔色
		renderer.setMarginsColor(getResources().getColor(
				R.color.cardio_bg_color));
           

顯示資料

這裡我們是模拟實時資料，通過handler遞歸調用不斷擷取新資料

Runnable runnable = new Runnable() {

		@Override
		public void run() {
			ArrayList<Integer> datas = new ArrayList<Integer>();
			for (int i = 0; i < 1; i++) {
				datas.add(random.nextInt(2000)+500);
			}
			ArrayList<Integer> datas2 = new ArrayList<Integer>();
			for (int i = 0; i < 1; i++) {
				datas2.add(random.nextInt(2000)+500);
			}

			updateCharts(datas);
			updateChartsMoreLine(datas2);			
			handler.postDelayed(this, POINT_GENERATE_PERIOD);
		}
	};
           

protected void updateCharts(ArrayList<Integer> datas) {
		for (int addY : datas) {
			series.add(i, addY);
			i++;
		}
		if (i < MAX_POINT) {
			renderer.setXAxisMin(0);
			renderer.setXAxisMax(MAX_POINT);
		} else {
			renderer.setXAxisMin(series.getItemCount() - MAX_POINT);
			renderer.setXAxisMax(series.getItemCount());
		}
		chart.repaint();
	}
           

protected void updateChartsMoreLine(ArrayList<Integer> datas) {
		for (int addY : datas) {
			series2.add(i2, addY);
			i2++;
		}
		chart.repaint();
	}
           

想要源碼的留下郵箱