棒グラフとかandroidでグラフを表示するならAChartEngineを使うと便利なので利用方法を紹介する。
デモにかなりの数がグラフが紹介されている。使い方はそれぞれ変わらないので、円グラフ、棒グラフ、折れ線グラフなどそれぞれのクラスを利用すると良い。複数のグラフを表示する場合は、0から始まるインデックスをデータ側やレンダリング側でしっかり合わせて指定することが大事。
1.ライブラリのダウンロード
http://code.google.com/p/achartengine/downloads/list
achartengine-1.0.0-demo-source.zipとachartengine-1.0.0.jarをダウンロード。バージョンは最新のものが良い。
2.デモを動かしてみる。
achartengine-1.0.0-demo-source.zipを解凍して、eclipseで既存のプロジェクトを追加で、実行してみる。動かなかったら、ビルドパスの構成からビルドパスの並び替えで、achartengine-1.0.0.jarを上の方に移動してみる。プロジェクトのクリーンをeclipseのプロジェクトメニューから実行する。
3.ビルドパスの追加
ライブラリの中のachartengine-0.6.0.jar(バージョンによって変わる)をlibsフォルダかlibフォルダにコピーし、ビルドパスの構成からjarの追加。
4.必要クラスの作成
デモのプロジェクトに多くのファイルがある。そのなかの
- AbstractDemoChart
- IDemoChart
を作成して、中身をコピーする。
その他に、多くのグラフのクラスがあると思う。その中で作りたいグラフを選び、そのファイルを追加する。
棒グラフなら「SalesStackedBarChart」がある。
5.intent生成からview生成に変更する。
「SalesStackedBarChart」などのグラフクラスはintentを返し、intentを実行することでグラフ表示されるようになっている。しかし、それでは画面いっぱいにグラフが表示され、使い勝手悪い。viewを返し、表示させたい場所で表示されるのがベストだと思う。
「SalesStackedBarChart」などのグラフクラスのexecute()の中の最後の
return ChartFactory.getBarChartIntent(context, buildBarDataset(titles, values), renderer,Type.STACKED);
を
line_chart = ChartFactory.getBarChartView(context, getBarChartDataset(), getRenderer(),Type.STACKED);
return line_chart;
に変更する。返り値も「Intent」から「GraphicalView」に変更。
6.データ部分:getBarChartDataset()を作成。
「SalesStackedBarChart」などのグラフクラスにgetBarChartDataset()を追加する。
public XYMultipleSeriesDataset getBarChartDataset() {
XYMultipleSeriesDataset myData = new XYMultipleSeriesDataset();
// データを追加していく 3つグラフを重ねて表示できる。後ろに隠れて見えなくなることもあるので注意。
//複数の情報(グラフ)まとめて表示する場合は
XYSeries dataSeries1 = new XYSeries(“border”,インデックス(何個目のグラフか));
dataSeries1.add(1, 10);
dataSeries1.add(2, 11);
myData.addSeries(0,dataSeries1);
XYSeries dataSeries2 = new XYSeries(“border”,インデックス(何個目のグラフか));
dataSeries2.add(1, 20);
dataSeries2.add(2, 21);
myData.addSeries(1,dataSeries2);
XYSeries dataSeries3 = new XYSeries(“border”,インデックス(何個目のグラフか));
dataSeries3.add(1, 30);
dataSeries3.add(2, 31);
myData.addSeries(2,dataSeries3);
return myData;
}
7.表示形式部分:getRenderer()
「SalesStackedBarChart」などのグラフクラスにgetRenderer()を追加する。eclipseではヒントが表示されるので「renderer.」や「myRenderer.」とか途中まで描くと仕様に合わせて使えるメソッドや定数が見つかるかもしれない。
public XYMultipleSeriesRenderer getRenderer() {
XYSeriesRenderer renderer = new XYSeriesRenderer();
XYSeriesRenderer renderer2 = new XYSeriesRenderer();
XYSeriesRenderer renderer3 = new XYSeriesRenderer();
// 棒グラフの色
renderer.setColor(Color.BLUE);
renderer2.setColor(Color.GREEN);
renderer3.setColor(Color.RED);
XYMultipleSeriesRenderer myRenderer = new XYMultipleSeriesRenderer(3);
myRenderer.addSeriesRenderer(0,renderer);
myRenderer.addSeriesRenderer(1,renderer2);
myRenderer.addSeriesRenderer(2,renderer3);
//title
myRenderer.setChartTitle(“進捗状況”);
myRenderer.setChartTitleTextSize(30);
myRenderer.setXTitle(“レベル”);
myRenderer.setYTitle(“数”);
myRenderer.setAxisTitleTextSize(20);
myRenderer.setXLabelsColor(g_colors[1]); //X軸の数字の色
myRenderer.setYLabelsColor(0, g_colors[1]); //左
myRenderer.setYAxisAlign(Align.LEFT, 0);
myRenderer.setYLabelsAlign(Align.RIGHT, 0);
myRenderer.setYLabelsColor(1, g_colors[1]); //右
myRenderer.setYAxisAlign(Align.RIGHT, 1);
myRenderer.setYLabelsAlign(Align.LEFT, 1);
myRenderer.setYLabelsColor(2, g_colors[1]); //右
myRenderer.setYAxisAlign(Align.RIGHT, 2);
myRenderer.setYLabelsAlign(Align.LEFT, 2);
// XY(初期表示の?)最大最小値
myRenderer.setShowGrid(true);
myRenderer.setGridColor(g_colors[0]);//グリッドの色
myRenderer.setXLabels(6);//グリッド間隔X
myRenderer.setYLabels(7);//グリッド間隔Y
myRenderer.setXAxisMin(1);//グリッド初期値X
myRenderer.setXAxisMax(60.1);//グリッド終始値X
myRenderer.setYAxisMin(0,0);//グリッド初期値Y //左
myRenderer.setYAxisMax(131,0);//グリッド終始値Y
myRenderer.setYAxisMin(0,1);//グリッド初期値Y //右
myRenderer.setYAxisMax(131,1);//グリッド終始値Y
myRenderer.setYAxisMin(0,2);//グリッド初期値Y //右
myRenderer.setYAxisMax(131,2);//グリッド終始値Y
// データ値の表示
myRenderer.getSeriesRendererAt(0).setDisplayChartValues(true);
myRenderer.getSeriesRendererAt(0).setChartValuesTextSize(12);
myRenderer.getSeriesRendererAt(1).setDisplayChartValues(false);
myRenderer.getSeriesRendererAt(1).setChartValuesTextSize(12);
myRenderer.getSeriesRendererAt(2).setDisplayChartValues(true);
myRenderer.getSeriesRendererAt(2).setChartValuesTextSize(12);
myRenderer.getSeriesRendererAt(2).setChartValuesSpacing(-12);//マイナスはグラフの下
// グリッド
myRenderer.setShowGrid(true);
myRenderer.setGridColor(Color.parseColor(“#c9c9c9”));
// スクロール
myRenderer.setPanEnabled(false, false);
//myRenderer.setPanLimits(new double[]{0, 31.5, 0, 0});
// 凡例表示
myRenderer.setShowLegend(true);
myRenderer.setLegendHeight(55);//設定しないと下に自動で広いマージンが指定される。
// ラベル表示
myRenderer.setXLabels(13);
myRenderer.setYLabels(10);
myRenderer.setLabelsTextSize(20);
myRenderer.setYLabelsAlign(Align.RIGHT);
// 軸
myRenderer.setShowAxes(true);
myRenderer.setBarSpacing(0.1);
// ズーム許可
myRenderer.setZoomEnabled(false, false);
//myRenderer.setZoomEnabled(true,true);
//myRenderer.setZoomRate(1000);
// 余白 設定しないとラベルが重なることがある。
int[] margin = {50, 60, 30, 0};
myRenderer.setMargins(margin);
// 余白背景色
myRenderer.setMarginsColor(Color.parseColor(“#FFFFFF”));
return myRenderer;
}
8.利用側のクラス作成。
R.layout.chartにchart_area1というIDでLinearLayoutを植え込み、そこにグラフを表示するようにする。レイアウトの幅や高さ合わせてグラフは作られる。
public class ChartActivity extends Activity {
static SalesStackedBarChart ssbc;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chart);
//グラフ用
LinearLayout chart_area = (LinearLayout) findViewById(R.id.chart_area1);
ssbc = new SalesStackedBarChart();
chart_area.addView(ssbc.execute(this));
}