AChartEngineでグラフを描く
グラフィックライブラリに、AFrecchartを使っていたのですが、どうしてもデータのある箇所に点(Shape)が出せなかったのと、ライセンスがLGPLであり、Androidアプリだとソースを公開しなければならない可能性もあるので、AChartEngineに変更しました。
０．準備
http://repository-achartengine.forge.cloudbees.com/snapshot/org/achartengine/achartengine/1.2.0/
から
achartengine-1.2.0.jar
をダウンロードし、プロジェクトのlibsフォルダにコピーする。
１．build.gradleへの追加
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile files('libs/achartengine-1.2.0.jar')
}
２．XML
LinearLayoutを作ればいいです。
<LinearLayout
android:id="@+id/chart"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:orientation="horizontal"
android:layout_marginTop="100dp" >
</LinearLayout>
３．ソースコード
public class MainActivity extends AppCompatActivity {
private final int HALF_DAY = 12 * 3600 * 1000;
private LinearLayout chartlayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
chartlayout = (LinearLayout) findViewById(R.id.chart);
GraphicalView graphicalView = TimeChartView();
chartlayout.removeAllViews();
chartlayout.addView(graphicalView);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
private GraphicalView TimeChartView() {
// (1)グラフデータの準備
// X軸 日付
String [] xStrValue={ "2015/12/22","2015/12/21","2015/12/20","2015/12/18" };
// Y軸 体重
double[] yDoubleValue={ 71.2, 71.8, 70.8, 70.4 };
// X軸 日付
String [] xStrValueTarget={ "2015/12/22","2015/12/21","2015/12/20","2015/12/19", "2015/12/18"};
// Y軸 目標体重
double[] yDoubleValueTarget={ 70.3, 70.3, 70.3, 70.3, 70.3 };
// 日付を文字形式から Date型へ変換
int DataCount=xStrValue.length;
Date[] xDateValue = new Date[DataCount];
for (int i = 0; i < DataCount; i++) {
xDateValue[i] =String2date(xStrValue[i]);
}
int DataCountTarget=xStrValueTarget.length;
Date[] xDateValueTarget = new Date[DataCountTarget];
for (int i = 0; i < DataCountTarget; i++) {
xDateValueTarget[i] =String2date(xStrValueTarget[i]);
}
// (2) グラフのタイトル、X軸Y軸ラベル、色等の設定
XYMultipleSeriesRenderer renderer = new XYMultipleSeriesRenderer();
renderer.setChartTitle("体重"); // グラフタイトル
renderer.setChartTitleTextSize(25); //
renderer.setXTitle("日付"); // X軸タイトル
renderer.setYTitle("体重(Kg)"); // Y軸タイトル
renderer.setAxisTitleTextSize(25); //
renderer.setLegendTextSize(25); // 凡例 テキストサイズ
renderer.setPointSize(7f); // ポイントマーカーサイズ
renderer.setXAxisMin(xDateValue[xDateValue.length - 1].getTime() - HALF_DAY); // X軸最小値
renderer.setXAxisMax(xDateValue[0].getTime() + HALF_DAY); // X軸最大値
renderer.setYAxisMin(70.0f); // Y軸最小値
renderer.setYAxisMax(72.0f); // Y軸最大値
renderer.setXLabelsAlign(Paint.Align.CENTER); // X軸ラベル配置位置
renderer.setYLabelsAlign(Paint.Align.RIGHT); // Y軸ラベル配置位置
renderer.setAxesColor(Color.BLACK); // X軸、Y軸カラー
renderer.setLabelsColor(Color.BLACK); // ラベルカラー
renderer.setXLabelsColor(Color.BLACK);
renderer.setYLabelsColor(0, Color.BLACK);
renderer.setXLabels(5); // X軸ラベルのおおよその数
renderer.setYLabels(5); // Y軸ラベルのおおよその数
renderer.setLabelsTextSize(25); // ラベルサイズ
// グリッド表示
renderer.setShowGrid(true);
// グリッド色
renderer.setGridColor(Color.parseColor("#808080")); // グリッドカラー
// グラフ描画領域マージン top, left, bottom, right
renderer.setMargins(new int[]{40, 100, 15, 40}); //
// 凡例非表示
// renderer.setShowLegend(false);
renderer.setMarginsColor(Color.rgb(128, 128, 128));
// マージンを凡例にフィットさせる
renderer.setFitLegend(true);
// (3) データ系列の色、マーク等の設定
XYSeriesRenderer r1 = new XYSeriesRenderer();
r1.setColor(Color.rgb(255, 166, 0));
r1.setPointStyle(PointStyle.CIRCLE);
r1.setLineWidth(5f);
r1.setFillPoints(true);
renderer.addSeriesRenderer(r1);
XYSeriesRenderer r2 = new XYSeriesRenderer();
r2.setColor(Color.rgb(255, 0, 0));
r2.setPointStyle(PointStyle.SQUARE);
r2.setLineWidth(5f);
r2.setFillPoints(true);
renderer.addSeriesRenderer(r2);
// (4) データ系列 データの設定 (体重)
XYMultipleSeriesDataset dataset = new XYMultipleSeriesDataset();
TimeSeries series1 = new TimeSeries("体重"); // データ系列凡例
for (int i = 0; i < DataCount; i++) {
series1.add(xDateValue[i], yDoubleValue[i]);
}
dataset.addSeries(series1);
// (4) データ系列 データの設定 (目標値)
TimeSeries seriesTarget = new TimeSeries("目標値"); //
for (int i = 0; i < DataCountTarget; i++) {
seriesTarget.add(xDateValueTarget[i], yDoubleValueTarget[i]);
}
dataset.addSeries(seriesTarget);
// (5)タイムチャートグラフの作成
GraphicalView mChartView= ChartFactory.getTimeChartView(this, dataset, renderer, "M/d");
return mChartView;
}
/*
* 日付時刻文字列を Date型に変換
*/
private Date String2date(String strDate) {
Date dateDate=null;
// 日付文字列→date型変換フォーマットを指定して
SimpleDateFormat sdf1 = new SimpleDateFormat("yyyy/M/d");
try {
dateDate = sdf1.parse(strDate);
}
catch (ParseException e) {
Toast.makeText(this, "正しい日付を入力して下さい", Toast.LENGTH_SHORT).show();
}
return dateDate;
}
}
これで描いたグラフが下記です。
