Help us understand the problem. What is going on with this article?

MPAndroidChartで棒グラフを作ったらx軸ラベルがなぜかずれた話

はじめに

たまたま機会がありAndroid Studioを用いて簡単なアプリ開発を行いました。
その中でグラフを書きたいと思い調べたところ「MPAndroidChart」というライブラリを用いればいいことがわかり、いくつかのサイトを参考にしながら棒グラフを作りました。
しかしその中でx軸のラベル設定がうまくいかず小一時間ほど苦労したので、その過程と解決策を記しておきます。
(余力があれば後から実際動かした画像も貼りたいところです)

困った部分

今回の問題に関係ない部分は大分端折っていますが、大枠は以下のような感じ。
こちらの記事を参考にさせていただいています。

『MPAndroidChartでシンプルな棒グラフの作成』
https://qiita.com/iKimishima/items/7fd192a074739cf5290b

MainActivity.java
public class MainActivity extends AppCompatActivity {

    protected BarChart chart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        chart = (BarChart) findViewById(R.id.chart1);

        //表示データ取得
        BarData data = new BarData(getBarData());
        chart.setData(data);

        //X軸
        XAxis xAxis = chart.getXAxis();
        //X軸に表示するLabelのリスト(最初の""は原点の位置)
        final String[] labels = {"","りんご", "みかん", "もも"};
        xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));

    }

}

特にこの最後のこの部分。

xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));

ほかのサイト等でも、事前にString配列で定義したものをnew IndexAxisValueFormatterに引数として与えているわけですが、このままだとなぜか代入するデータによってうまく軸が表示されないことがありました。
(本来であれば3つの要素に対してりんご、みかん、もものラベルがつくはずが、なぜか3つの要素にみかん、もも、(ラベルなし)となってしまうという感じです。ただlabelsの内容によってはうまくいくこともありました)

解決策

理由はともあれ、「とにかく早く動いてくれ~」という気持ちだったので、調べてみたところ以下のサイトに辿り着きました。

『MPAndroidChart - 棒グラフにラベルを追加する』
https://www.366service.com/jp/qa/94329e5e85f6eddc6886945506ec0759

ここではIndexAxisValueFormatterを使わずにフォーマッタを作成することでラベルを設定する、という解説があります。
使いたいクラスにLabelFormatterを突っ込み、setValueFormatterの引数をそれに合わせてやることでグラフは直りました。

hoge.java
//先ほどまで
xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
//更新後
xAxis.setValueFormatter(new LabelFormatter(labels));
fuga.java
 public class LabelFormatter implements IAxisValueFormatter {
    private final String[] mLabels;

    public LabelFormatter(String[] labels) {
        mLabels = labels;
    }

    @Override
    public String getFormattedValue(float value, AxisBase axis) {
        return mLabels[(int) value];
    }
}

結局のところ

なぜIndexAxisValueFormatterが意図した通りに動いてくれなかったのか、真相はよくわかりませんでした。
ライブラリのバージョンとかが関係していそうな気はするのですが……
意外とMPAndroidChart周りの記事が少なく、同じような壁に当たっている日本語のサイトを見つけなかったので、寄せ集めの知識ではありますが記事にさせていただきました。
実際のコードなどについては以下の記事を参照していただいたほうが確実かと思います。

グラフ関連は設定する項目が多い・かつ分かりやすくまとめられたものを見つけられなかったので、機会があれば自分で整理してみたいと思いました。

大いに参考にさせていただいた記事様

『MPAndroidChartでシンプルな棒グラフの作成』
https://qiita.com/iKimishima/items/7fd192a074739cf5290b
『MPAndroidChart - 棒グラフにラベルを追加する』
https://www.366service.com/jp/qa/94329e5e85f6eddc6886945506ec0759

wist_fm
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした