Androidのグラフライブラリ、WilliamChartを使ってみた。

github.com

いつもの

   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>