如何在 android studio 中显示 Stacked Bar graph/chart？

Question

我必须创建一个堆栈条形图，我的要求是图表应该如下所示。

我检查了很多图形库，但没有人提供这种类型的UI。这有可能实现吗？

Answer 1

所以我终于找到了办法。

第 1 步：添加 3 个具有各自颜色的视图和一个按钮，如下所示 XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="10sp"
        android:background="#ff0000"
        android:id="@+id/viewOverdue"/>

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="2sp"
        android:background="#FFDD00"
        android:layout_toEndOf="@+id/viewOverdue"
        android:id="@+id/viewActive"/>

    <View
        android:layout_width="75sp"
        android:layout_height="15sp"
        android:layout_marginTop="100sp"
        android:layout_marginStart="2sp"
        android:background="#00FF00"
        android:layout_toEndOf="@+id/viewActive"
        android:id="@+id/viewDone"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Overdue"
        android:id="@+id/editOverdue"
        android:layout_below="@+id/viewActive"
        android:layout_marginTop="100sp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Active"
        android:layout_below="@+id/editOverdue"
        android:id="@+id/editActive"
        android:layout_marginTop="2sp"/>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Enter Done"
        android:layout_below="@+id/editActive"
        android:id="@+id/editDone"
        android:layout_marginTop="2sp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="submit"
        android:id="@+id/btnSubmit"
        android:layout_below="@id/editDone"
        android:layout_marginTop="20sp"/>
</RelativeLayout>

这是它的外观： 请注意，视图最初设置为不可见。

第 2 步：编码部分：

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private EditText typeActive, typeDone, typeOverdue;
    private Button btnSubmit;
    private View viewDone, viewOverDue, viewActive;

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

        typeActive = findViewById(R.id.editActive);
        typeDone = findViewById(R.id.editDone);
        typeOverdue = findViewById(R.id.editOverdue);

        btnSubmit = findViewById(R.id.btnSubmit);

        viewDone = findViewById(R.id.viewDone);
        viewActive = findViewById(R.id.viewActive);
        viewOverDue = findViewById(R.id.viewOverdue);

        viewDone.setVisibility(View.INVISIBLE);
        viewOverDue.setVisibility(View.INVISIBLE);
        viewActive.setVisibility(View.INVISIBLE);

        //Type all the number of tasks and press the submit button
        btnSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                final String tasksActive = typeActive.getText().toString();
                final String tasksDone = typeDone.getText().toString();
                final String tasksOverdue = typeOverdue.getText().toString();

                int intTaskActive = Integer.parseInt(tasksActive);
                int intTaskDone = Integer.parseInt(tasksDone);
                int intTaskOverdue = Integer.parseInt(tasksOverdue);

                int totalTasks = intTaskActive + intTaskOverdue + intTaskDone;

                float percentageActive = (intTaskActive*100.0f)/totalTasks;
                float percentageDone   = (intTaskDone*100.0f)/totalTasks;
                float percentageOverdue = (intTaskOverdue*100.0f)/totalTasks;

                int intPercActive = (int)percentageActive;
                int intPercDone = (int)percentageDone;
                int intPercOverdue = (int)percentageOverdue;

                viewDone.setVisibility(View.VISIBLE);
                viewOverDue.setVisibility(View.VISIBLE);
                viewActive.setVisibility(View.VISIBLE);

                viewDone.setLayoutParams(new RelativeLayout.LayoutParams(intPercDone*10, 50));
                viewActive.setLayoutParams(new RelativeLayout.LayoutParams(intPercActive*10, 50));
                viewOverDue.setLayoutParams(new RelativeLayout.LayoutParams(intPercOverdue*10, 50));

            }
        });

    }
}

这是执行后的输出：

所以这是如何工作的，你在编辑文本中输入任务的数量。您如何获得任务数量并不重要，但您需要将其转换为 stackBar 总长度的百分比或您称之为的任何内容。所以最后你只需根据数字为每个视图分配相应的宽度。

如何在 android studio 中显示 Stacked Bar graph/chart？

How to display Stacked Bar graph/chart in android studio?

android

graph

mpandroidchart