How to set labels and values in horizontal bar charts?

一笑奈何 提交于 2019-12-04 06:43:57

问题


I am using MPAndroidChart. Please check my below code

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.graphs.graphs2.MainActivity">



    <com.github.mikephil.charting.charts.HorizontalBarChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

MainActivity.java

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

        HorizontalBarChart chart = (HorizontalBarChart) findViewById(R.id.chart);

        BarData data = new BarData(getDataSet(Color.rgb(115,115,115),4,6,"Low","lowSet"),
                getDataSet(Color.rgb(71,209,71),3,44,"Normal","normalSet"),
                getDataSet(Color.rgb(255,204,0),2,44,"High","highSet"),
                getDataSet(Color.rgb(255,51,0),1,6,"Very High","veryHighSet"));
        chart.setData(data);
        chart.setDragEnabled(true); // on by default
        //chart.setVisibleXRange(0,3); // sets the viewport to show 3 bars
        chart.animateXY(2000, 2000);
        chart.invalidate();
    }

private BarDataSet getDataSet(int color, float position, float value, String entryLabel, String datasetLabel) {
        ArrayList<BarEntry> entries = new ArrayList();
        entries.add(new BarEntry(position, value,entryLabel));

        BarDataSet dataset = new BarDataSet(entries,datasetLabel);
        dataset.setColor(color);
        return dataset;
    }

This gave me the below view

But what I want is something like below

Now, in my chart, 1. How can I display the value of bar at the end of bar with a percentage mark? My current chart won't display any value! 2. How can I set the labels at the left side of the bars? I tried it by using BarEntry constructor, but it didn't work. 3. How can I remove all grid lines?

Update

I tried the solution by PPartasian, it generated the below error.

01-11 10:51:10.402 26974-26974/com.example.graphs.viewchart E/AndroidRuntime: FATAL EXCEPTION: main
                                                                              Process: com.example.graphs.viewchart, PID: 26974
                                                                              java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.graphs.viewchart/com.example.graphs.viewchart.MainActivity}: android.view.InflateException: Binary XML file line #36: Error inflating class com.github.ppartisan.graphish.view.BarView
                                                                                  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2656)
                                                                                  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2721)
                                                                                  at android.app.ActivityThread.access$900(ActivityThread.java:168)
                                                                                  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1393)
                                                                                  at android.os.Handler.dispatchMessage(Handler.java:102)
                                                                                  at android.os.Looper.loop(Looper.java:135)
                                                                                  at android.app.ActivityThread.main(ActivityThread.java:5753)
                                                                                  at java.lang.reflect.Method.invoke(Native Method)
                                                                                  at java.lang.reflect.Method.invoke(Method.java:372)
                                                                                  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1405)
                                                                                  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1200)
                                                                               Caused by: android.view.InflateException: Binary XML file line #36: Error inflating class com.github.ppartisan.graphish.view.BarView
                                                                                  at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:757)
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:806)
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:809)
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:504)
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:414)
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:365)
                                                                                  at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:284)
                                                                                  at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
                                                                                  at com.example.graphs.viewchart.MainActivity.onCreate(MainActivity.java:21)
                                                                                  at android.app.Activity.performCreate(Activity.java:6112)
                                                                                  at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1117)
                                                                                  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2609)
                                                                                  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2721) 
                                                                                  at android.app.ActivityThread.access$900(ActivityThread.java:168) 
                                                                                  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1393) 
                                                                                  at android.os.Handler.dispatchMessage(Handler.java:102) 
                                                                                  at android.os.Looper.loop(Looper.java:135) 
                                                                                  at android.app.ActivityThread.main(ActivityThread.java:5753) 
                                                                                  at java.lang.reflect.Method.invoke(Native Method) 
                                                                                  at java.lang.reflect.Method.invoke(Method.java:372) 
                                                                                  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1405) 
                                                                                  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1200) 
                                                                               Caused by: java.lang.ClassNotFoundException: Didn't find class "com.github.ppartisan.graphish.view.BarView" on path: DexPathList[[zip file "/data/app/com.example.graphs.viewchart-1/base.apk"],nativeLibraryDirectories=[/vendor/lib, /system/lib]]
                                                                                  at dalvik.system.BaseDexClassLoader.findClass(BaseDexClassLoader.java:56)
                                                                                  at java.lang.ClassLoader.loadClass(ClassLoader.java:511)
                                                                                  at java.lang.ClassLoader.loadClass(ClassLoader.java:469)
                                                                                  at android.view.LayoutInflater.createView(LayoutInflater.java:571)
                                                                                  at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:743)
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:806) 
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:809) 
                                                                                  at android.view.LayoutInflater.rInflate(LayoutInflater.java:809) 
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:504) 
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:414) 
                                                                                  at android.view.LayoutInflater.inflate(LayoutInflater.java:365) 
                                                                                  at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:284) 
                                                                                  at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                                                                                  at com.example.graphs.viewchart.MainActivity.onCreate(MainActivity.java:21) 
                                                                                  at android.app.Activity.performCreate(Activity.java:6112) 
                                                                                  at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1117) 
                                                                                  at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2609) 
                                                                                  at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2721) 
                                                                                  at android.app.ActivityThread.access$900(ActivityThread.java:168) 
                                                                                  at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1393) 
                                                                                  at android.os.Handler.dispatchMessage(Handler.java:102) 
                                                                                  at android.os.Looper.loop(Looper.java:135) 
                                                                                  at android.app.ActivityThread.main(ActivityThread.java:5753) 
                                                                                  at java.lang.reflect.Method.invoke(Native Method) 
                                                                                  at java.lang.reflect.Method.invoke(Method.java:372) 
                                                                                  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1405) 
                                                                                  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1200) 
                                                                                Suppressed: java.lang.ClassNotFoundException: Didn't find class "com.github.ppartisan.graphish.view.BarView" on path: DexPathList[[dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-support-annotations-24.2.1_ee83e15951f6e098dcf8d5c7289233f29c08ba29-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_9-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_8-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_7-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_6-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_5-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_4-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_3-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_2-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_1-classes.dex", dex file "/data/data/com.example.graphs.viewchart/files/instant-run/dex/slice-slice_0-classes.dex", dex file "/data/data/com.exam

UPDATE

Issue sorted out. The BarView UI has to be changed as below

<com.example.graphs.viewchart.BarView
        android:id="@+id/low_bar"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="8dp" />

回答1:


From looking at the image of desired output, it should be possible to create a simple bar graph of this sort without using third party libraries. The "bars" could be composed of simple Views which can lengthen or shorten based on a figure calculated by taking a percentage of the total available width. Here is an example of how you could achieve this:

1) Create a custom View with an adjustable length to act as a "bar"

public final class BarView extends View {

    private final Paint mPaint = new Paint();
    private int percent = 0;

    public BarView(Context context) {
        super(context);
        init();
    }

    public BarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public BarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);
    }

    public void set(int color, int percent) {

        if(percent < 0 || percent > 100) {
            throw new IllegalArgumentException("Percent value must range from 0 to 100");
        }

        mPaint.setColor(color);
        this.percent = percent;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final float width = MeasureSpec.getSize(widthMeasureSpec);
        final float adjWidth = (width*((float)percent/100));
        setMeasuredDimension((int)adjWidth, heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawRect(0,0,getWidth(),getHeight(),mPaint);
    }

}

2) Use a percentage value to set the width

public class MainActivity extends AppCompatActivity {

    private TextView mLowLabel, mMidLabel, mHighLabel;
    private BarView mLowBar, mMidBar, mHighBar;

    //Some sample percentage values
    private final int low = 17;
    private final int mid = 90;
    private final int high = 34;

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

        mLowBar = (BarView) findViewById(R.id.low_bar);
        mMidBar = (BarView) findViewById(R.id.mid_bar);
        mHighBar = (BarView) findViewById(R.id.high_bar);

        mLowLabel = (TextView) findViewById(R.id.low_text);
        mMidLabel = (TextView) findViewById(R.id.mid_text);
        mHighLabel = (TextView) findViewById(R.id.high_text);

        mLowBar.set(Color.BLUE, low);
        mMidBar.set(Color.RED, mid);
        mHighBar.set(Color.GREEN, high);

        mLowLabel.setText(getPercentage(low));
        mMidLabel.setText(getPercentage(mid));
        mHighLabel.setText(getPercentage(high));

    }

    private String getPercentage(int per) {
        return per + "%";
    }

}

3) Set it up in XML. The weights of the bars are set to 1 so they fill all available space, which will constitute the "100%" reading.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.github.ppartisan.graphish.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_centerInParent="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Low"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:minEms="3"
                android:textStyle="bold"/>

            <com.github.ppartisan.graphish.view.BarView
                android:id="@+id/low_bar"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="8dp" />

            <TextView
                android:id="@+id/low_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mid"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:minEms="3"
                android:textStyle="bold"/>

            <com.github.ppartisan.graphish.view.BarView
                android:id="@+id/mid_bar"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="8dp" />

            <TextView
                android:id="@+id/mid_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:gravity="center_vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="High"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp"
                android:minEms="3"
                android:textStyle="bold"/>

            <com.github.ppartisan.graphish.view.BarView
                android:id="@+id/high_bar"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="8dp" />

            <TextView
                android:id="@+id/high_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginRight="16dp" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

Here is an image of the output:



来源:https://stackoverflow.com/questions/41569803/how-to-set-labels-and-values-in-horizontal-bar-charts

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!