Androidのグラフライブラリ、WilliamChartを使ってみた。
いつもの
compile 'com.diogobernardino:williamchart:2.0.1'
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp" tools:context=".MainActivity"> <com.db.chart.view.LineChartView android:id="@+id/linechart" android:layout_width="match_parent" android:layout_height="match_parent"/> </RelativeLayout>
MainActivity.java
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LineChartView chart = (LineChartView) findViewById(R.id.linechart); String[] x_ziku = {"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"}; float[] y_ziku = {3f,5f,1f,6f,1f,0f,3f,8f,10f,1f,3f,14f}; LineSet dataset = new LineSet(x_ziku, y_ziku); int sen_no_iro = Color.RED; int sen_no_futosa = 1; dataset.setColor(sen_no_iro).setThickness(Tools.fromDpToPx(sen_no_futosa)); chart.addData(dataset); chart.show(); }
アニメーション効果
~ 省略 ~ Animation anim = new Animation().setStartPoint(0,.2f); chart.show(anim);
グラフの背景に色をつける。
int haikei_iro = Color.GRAY;
chart.setBackgroundColor(haikei_iro);
わかりやすくする。
int yoko_sen_iro = Color.BLACK; int yoko_sen_futosa = 1; Paint gridPaint = new Paint(); gridPaint.setColor(yoko_sen_iro); chart.setBorderSpacing(Tools.fromDpToPx(yoko_sen_futosa)) .setGrid(ChartView.GridType.HORIZONTAL, gridPaint);
基準となる線をドットの線で表示する。
String[] x_dot_ziku = {"1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"}; float tyumoku = 9.5f; float[] y_dot_ziku = { tyumoku,tyumoku,tyumoku,tyumoku,tyumoku,tyumoku, tyumoku,tyumoku,tyumoku,tyumoku,tyumoku,tyumoku}; dataset = new LineSet(x_dot_ziku, y_dot_ziku); dataset.setColor(Color.parseColor("#00008b")) // ドットの横線の色 .setThickness(Tools.fromDpToPx(3)) //ドットの太さ .setDashed(new float[]{10, 10}); //ドットの感覚 chart.addData(dataset);
X軸とY軸のラベルを内側へ
Paint gridPaint = new Paint();
gridPaint.setColor(yoko_sen_iro);
chart.setBorderSpacing(Tools.fromDpToPx(yoko_sen_futosa))
.setXLabels(AxisController.LabelPosition.INSIDE)
.setYLabels(AxisController.LabelPosition.INSIDE)
.setGrid(ChartView.GridType.HORIZONTAL, gridPaint);
場合によっては、スペースがないため、グラフの枠線とかぶるかも。余分なデータを追加して、4番目から55番目のデータからグラフを生成すると回避できるかも。
dataset.setColor(Color.RED) .setThickness(Tools.fromDpToPx(3)) .beginAt(4).endAt(55);
丸いのを表示
dataset.setColor(sen_no_iro). setThickness(Tools.fromDpToPx(sen_no_futosa)) .setDotsStrokeThickness(Tools.fromDpToPx(2)) // 丸い何か .setDotsStrokeColor(Color.parseColor("#FF58C674")) .setDotsColor(Color.parseColor("#eef1f6")) .beginAt(2).endAt(x_ziku.length - 2);
チップ効果
LineChartView chart = (LineChartView) findViewById(R.id.linechart); Tooltip tip = new Tooltip(this, R.layout.linechart_three_tooltip, R.id.value); if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { tip.setEnterAnimation(PropertyValuesHolder.ofFloat(View.ALPHA, 1), PropertyValuesHolder.ofFloat(View.SCALE_X, 1f), PropertyValuesHolder.ofFloat(View.SCALE_Y, 1f)); tip.setExitAnimation(PropertyValuesHolder.ofFloat(View.ALPHA,0), PropertyValuesHolder.ofFloat(View.SCALE_X,0f), PropertyValuesHolder.ofFloat(View.SCALE_Y,0f)); } //タップすると数値が表示される。 chart.setTooltips(tip);
linechart_three_tooltip.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="0dp" android:layout_height="0dp"> <TextView android:id="@+id/value" android:layout_width="40dp" android:layout_height="40dp" android:gravity="center" android:textSize="12sp" android:textColor="#777" android:includeFontPadding="false" android:background="@drawable/linechart_three_tooltip_bck"> </TextView> </RelativeLayout>
drawable/linechart_three_tooltip_bck.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ffffff"/> </shape>