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

さまよえる、Android

Androidのプログラミングで便利なことや残しておきたいことを残しておく。もしオススメのライブラリがあったら教えてくださいね。

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

github.com


https://github.com/diogobernardino/WilliamChart/raw/master/art/demo2.gif

いつもの

   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();
    }

f:id:araiyusukej:20151022173138p:plain

アニメーション効果

 ~ 省略 ~
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);

f:id:araiyusukej:20151022180455p:plain

基準となる線をドットの線で表示する。

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);

f:id:araiyusukej:20151022180511p:plain

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>

f:id:araiyusukej:20151022193558p:plain