読者です 読者をやめる 読者になる 読者になる

2hours

1日2時間でなにができるかな

aChartEngineで棒グラフ

Android グラフ

準備

まずライブラリをダウンロードしてくる。
今回使用したのはachartengine-0.6.0.jarというファイル。
http://code.google.com/p/achartengine/downloads/list

ライブラリ読み込み

  1. 対象プロジェクトの直下に「libs」というフォルダを作成し、そのフォルダに先ほどダウンロードしたjarファイルを置く。
  2. Eclipseのメニューから「プロジェクト」→「プロパティ」→「Javaのビルド・パス」を開く。
  3. 「ライブラリ」タブを選択し、「jar追加」からさっきのjarファイルを選択する。


とりあえずこれで準備完了。

実装の仕方

とりあえずサンプルを動かしてみる

とりあえずデモソースを見てみると、SalesBarChart.javaというのが今回やりたいことに近い。
このクラスがintentを返却して、呼び出し元でstartActivityしてる。
これをそのまま実装したら動いたけど、全画面にしか表示出来ない・・・。

情報を探ってみる

http://suka4.blogspot.com/2011/03/android-achartengine.html
こちらで円グラフの実装について書かれていた。
「ChartFactory.getPieChartViewってのがあった」ってことで探してみたらChartFactory.getBarChartViewってのがあったのでこれを使う。

コード

レイアウト用XML


Activityクラス

public class ChartActivity extends Activity {

	protected GraphicalView mChartView;

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.graph);

		LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
		mChartView = ChartFactory.getBarChartView(context, getBarChartDataset(),getRenderer(), BarChart.Type.DEFAULT);
		layout.addView(mChartView);
	}


	public XYMultipleSeriesDataset getBarChartDataset() {
		XYMultipleSeriesDataset myData = new XYMultipleSeriesDataset();
		XYSeries dataSeries = new XYSeries("data");

		// データを追加していく
		dataSeries.add(1, 7);
		dataSeries.add(2, 8);
		dataSeries.add(3, 9);
		dataSeries.add(4, 8);
		dataSeries.add(5, 7);
		dataSeries.add(6, 6);
		dataSeries.add(7, 7.1);
		dataSeries.add(8, 8);
		dataSeries.add(9, 5);
		myData.addSeries(dataSeries);
		return myData;
	}

	public XYMultipleSeriesRenderer getRenderer() {
		XYSeriesRenderer renderer = new XYSeriesRenderer();

		// 棒グラフの色
		renderer.setColor(Color.parseColor("#158aea"));

		XYMultipleSeriesRenderer myRenderer = new XYMultipleSeriesRenderer(); 
		myRenderer.addSeriesRenderer(renderer);
		
		// XY(初期表示の?)最大最小値
		myRenderer.setXAxisMin(0);
		myRenderer.setXAxisMax(10);
		myRenderer.setYAxisMin(0);
		myRenderer.setYAxisMax(20);
		
		// データ値の表示
		myRenderer.setDisplayChartValues(true);
		myRenderer.setChartValuesTextSize(18);

		// グリッド表示
		myRenderer.setShowGrid(true);
		// グリッド色
		myRenderer.setGridColor(Color.parseColor("#c9c9c9"));
		
		// スクロール許可(X,Y)
		myRenderer.setPanEnabled(true, false);
		// スクロール幅(X最少, X最大, Y最少, Y最大)
		myRenderer.setPanLimits(new double{0, 31.5, 0, 0});

		// 凡例表示
		myRenderer.setShowLegend(false);
		
		// ラベル表示
		myRenderer.setXLabels(10);
		myRenderer.setYLabels(20);
		myRenderer.setLabelsTextSize(20);
		myRenderer.setYLabelsAlign(Align.RIGHT);
		
		// XY軸表示
		myRenderer.setShowAxes(false);
		// バー間の間隔
		myRenderer.setBarSpacing(0.5);
		// ズーム許可
		myRenderer.setZoomEnabled(false, false);
		// 余白
		int margin = {20, 50, 50, 30};
		myRenderer.setMargins(margin);
		// 余白背景色
		myRenderer.setMarginsColor(Color.parseColor("#FFFFFF"));
		
		return myRenderer;
	}
}

※適当に抜き出したんで、そのままコピペしても動かないかもしれない・・・。

結果

思った通りに表示させるのが結構大変だった・・・。