web-dev-qa-db-ja.com

タップすると値が表示される[MPAndroidChart]

MPAndroidChartがクリックされたときにデータポイントの値(ラベル)のみを表示できるようにする方法を探していました。しかし、ドキュメントでもオンラインで見つけることができなかったようです。

line chartを使用しましたが、クリックしたときに特定のポイントのラベルのみを表示したいのです。

11
Rod_Algonquin

1-チャートでタッチを有効にする

chart.setTouchEnabled(true);

2-MarkerViewを作成します

public class CustomMarkerView extends MarkerView {

    private TextView tvContent;
    public CustomMarkerView (Context context, int layoutResource) {
        super(context, layoutResource);
        // this markerview only displays a textview
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    // callbacks everytime the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        tvContent.setText("" + e.getVal()); // set the entry-value as the display text
    }

    @Override
    public int getXOffset() {
        // this will center the marker-view horizontally
        return -(getWidth() / 2);
    }

    @Override
    public int getYOffset() {
        // this will cause the marker-view to be above the selected value
        return -getHeight();
    }
}

3-tvContentビューを作成します

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="wrap_content"
    Android:layout_height="40dp"
    Android:background="@drawable/markerImage" >

    <TextView
        Android:id="@+id/tvContent"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerHorizontal="true"
        Android:layout_marginTop="7dp"
        Android:layout_marginLeft="5dp"
        Android:layout_marginRight="5dp"
        Android:text=""
        Android:textSize="12dp"
        Android:textColor="@Android:color/white"
        Android:ellipsize="end"
        Android:singleLine="true"
        Android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

4。チャートにビューマーカーを設定します

CustomMarkerView mv = new CustomMarkerView (Context, R.layout.custom_marker_view_layout);
chart.setMarkerView(mv);

https://github.com/PhilJay/MPAndroidChart/wiki/MarkerView

14
rafaelasguerra

IMarkerインターフェイスを使用します(MarkerViewはリリース3.0.0以降非推奨になりました)

1。 IMarkerインターフェイスを実装する新しいクラスを作成します

public class YourMarkerView extends MarkerView {

private TextView tvContent;

public MyMarkerView(Context context, int layoutResource) {
    super(context, layoutResource);

    // find your layout components
    tvContent = (TextView) findViewById(R.id.tvContent);
}

// callbacks everytime the MarkerView is redrawn, can be used to update the
// content (user-interface)
@Override
public void refreshContent(Entry e, Highlight highlight) {

    tvContent.setText("" + e.getY());

    // this will perform necessary layouting
    super.refreshContent(e, highlight);
}

private MPPointF mOffset; 

@Override
public MPPointF getOffset() {

    if(mOffset == null) {
       // center the marker horizontally and vertically
       mOffset = new MPPointF(-(getWidth() / 2), -getHeight());
    }

    return mOffset;
}}

2。マーカーをチャートに設定します

IMarker marker = new YourMarkerView();
chart.setMarker(marker);

参照: https://github.com/PhilJay/MPAndroidChart/wiki/IMarker-Interface

6