web-dev-qa-db-ja.com

MPAndroidChartライブラリで、長いときにX軸ラベルを2行に折り返す方法は?

X軸ラベルが長い場合に2行に移動するように表示しようとしています。 LineChartでこれを達成する方法は?下のスクリーンショットを参照してください。デートの隣にいるのではなく、セカンドラインに行く時間が欲しい

enter image description here

20
NinjaCoder

これを達成したいが元のライブラリを保持したい私のような人のために、@ fgueliの変更に触発された簡単な解決策を示します。これは、1つのブレークラインにのみ適用されます(ラベルに「\ n」を追加)が、ニーズに合わせて簡単に変更できます。

  1. サブクラスXAxisRenderer

    public class CustomXAxisRenderer extends XAxisRenderer {
        public CustomXAxisRenderer(ViewPortHandler viewPortHandler, XAxis xAxis, Transformer trans) {
             super(viewPortHandler, xAxis, trans);
        }
    
        @Override
        protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) {
            String line[] = formattedLabel.split("\n");
            Utils.drawXAxisValue(c, line[0], x, y, mAxisLabelPaint, anchor, angleDegrees);
            Utils.drawXAxisValue(c, line[1], x + mAxisLabelPaint.getTextSize(), y + mAxisLabelPaint.getTextSize(), mAxisLabelPaint, anchor, angleDegrees);
        }
    }
    

  1. このレンダラーを目的のチャートに設定します

    lineChart.setXAxisRenderer(new CustomXAxisRenderer(lineChart.getViewPortHandler(), lineChart.getXAxis(), lineChart.getTransformer(YAxis.AxisDependency.LEFT)));
    

  1. 楽しい!

LineChart labels on multiple lines

23

ライブラリを変更して、xAxisでマルチラインラベルを使用できるようにしました\ n

https://github.com/fabriziogueli/MPAndroidChart/tree/axis_multiline_labels

現在は機能していますが、さらにテストが必要で、コードのスタイル設定や調整が必要になる可能性があります。

XAxis xAxis = mChart.getXAxis();
xAxis.setMultiLineLabel(true);

次に、たとえば次のようなSimpleDateFormatを使用できます。

SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yy\nHH:mm a");

多分あなたはあなたのチャートに追加のボトムオフセットを設定する必要があります:

mChart.setExtraBottomOffset(50);
14
fgueli

X座標をオフセットする必要はありません。複数行のシナリオの場合、コードは

@Override
protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) {
    String lines[] = formattedLabel.split("\n");
    for (int i = 0; i < lines.length; i++) {
        float vOffset = i * mAxisLabelPaint.getTextSize();
        Utils.drawXAxisValue(c, lines[i], x, y + vOffset, mAxisLabelPaint, anchor, angleDegrees);
    }
}
2
user3261128

これは、必要に応じてライブラリを変更することにより、自分で実装する必要があるもののように見えます。

現在、デフォルトでは、x軸に複数の線を付けることはできません。したがって、その理由は、Android Canvasは、このような"Line 1\nLine2" 2行として。

2
Philipp Jahoda

@Guillaume Jounelの回答の改良版で、複数の改行、および改行なしの文字列をサポートします。

    @Override
    protected void drawLabel(Canvas c, String formattedLabel, float x, float y,
                                 MPPointF anchor, float angleDegrees) {
    String line[] = formattedLabel.split("\n");
    Utils.drawXAxisValue(c, line[0], x, y, mAxisLabelPaint, anchor, angleDegrees);
        for (int i = 1; i < line.length; i++) { // we've already processed 1st line
             Utils.drawXAxisValue(c, line[i], x, y + mAxisLabelPaint.getTextSize() * i,
                 mAxisLabelPaint, anchor, angleDegrees);
        }
    }
2
Peter B.

@Guillaume Jounelの回答を使用して、次を追加します。

XAxis xAxis = lineChart.getXAxis();    
xAxis.setLabelRotationAngle(-30f);
1
Syaoran-kun