如何在 android studio 中实现水平评分条形图？

Question

如何得到这种类型的图表?

我想在我的应用程序中设计和实现一个水平的评分条形图，如下图所示。
我遵循了几个教程，但我无法获得合适的解决方案。

请建议链接或代码。

Answer 1

使用这个库https://github.com/PhilJay/MPAndroidChart

将此添加到您的应用程序 build.gradle:

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
}

Answer 2

这对你有用试试这个方法

http://www.truiton.com/2015/04/android-chart-example-mp-android-chart-library/

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BarChart chart = (BarChart) findViewById(R.id.chart);

        BarData data = new BarData(getXAxisValues(), getDataSet());
        chart.setData(data);
        chart.setDescription("My Chart");
        chart.animateXY(2000, 2000);
        chart.invalidate();
    }

    private ArrayList<BarDataSet> getDataSet() {
        ArrayList<BarDataSet> dataSets = null;

        ArrayList<BarEntry> valueSet1 = new ArrayList<>();
        BarEntry v1e1 = new BarEntry(110.000f, 0); // Jan
        valueSet1.add(v1e1);
        BarEntry v1e2 = new BarEntry(40.000f, 1); // Feb
        valueSet1.add(v1e2);
        BarEntry v1e3 = new BarEntry(60.000f, 2); // Mar
        valueSet1.add(v1e3);
        BarEntry v1e4 = new BarEntry(30.000f, 3); // Apr
        valueSet1.add(v1e4);
        BarEntry v1e5 = new BarEntry(90.000f, 4); // May
        valueSet1.add(v1e5);
        BarEntry v1e6 = new BarEntry(100.000f, 5); // Jun
        valueSet1.add(v1e6);

        ArrayList<BarEntry> valueSet2 = new ArrayList<>();
        BarEntry v2e1 = new BarEntry(150.000f, 0); // Jan
        valueSet2.add(v2e1);
        BarEntry v2e2 = new BarEntry(90.000f, 1); // Feb
        valueSet2.add(v2e2);
        BarEntry v2e3 = new BarEntry(120.000f, 2); // Mar
        valueSet2.add(v2e3);
        BarEntry v2e4 = new BarEntry(60.000f, 3); // Apr
        valueSet2.add(v2e4);
        BarEntry v2e5 = new BarEntry(20.000f, 4); // May
        valueSet2.add(v2e5);
        BarEntry v2e6 = new BarEntry(80.000f, 5); // Jun
        valueSet2.add(v2e6);

        BarDataSet barDataSet1 = new BarDataSet(valueSet1, "Brand 1");
        barDataSet1.setColor(Color.rgb(0, 155, 0));
        BarDataSet barDataSet2 = new BarDataSet(valueSet2, "Brand 2");
        barDataSet2.setColors(ColorTemplate.COLORFUL_COLORS);

        dataSets = new ArrayList<>();
        dataSets.add(barDataSet1);
        dataSets.add(barDataSet2);
        return dataSets;
    }

    private ArrayList<String> getXAxisValues() {
        ArrayList<String> xAxis = new ArrayList<>();
        xAxis.add("JAN");
        xAxis.add("FEB");
        xAxis.add("MAR");
        xAxis.add("APR");
        xAxis.add("MAY");
        xAxis.add("JUN");
        return xAxis;
    }
}

Answer 3

这是 MPAndroidChart 库更改后的实际 解决方案 2017。

1。添加到 build.gradle

    allprojects {
        repositories {
            maven { url "https://jitpack.io" }
        }
    }

以及您的应用程序 build.gradle

    dependencies {
        compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'
    }

2。将图表元素添加到您的模板：

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

3。添加到片段 onCreateView（或 Activity onCreate）

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

    BarDataSet set1;
    set1 = new BarDataSet(getDataSet(), "The year 2017");

    set1.setColors(Color.parseColor("#F78B5D"), Color.parseColor("#FCB232"), Color.parseColor("#FDD930"), Color.parseColor("#ADD137"), Color.parseColor("#A0C25A"));

    ArrayList<IBarDataSet> dataSets = new ArrayList<IBarDataSet>();
    dataSets.add(set1);

    BarData data = new BarData(dataSets);

    // hide Y-axis
    YAxis left = chart.getAxisLeft();
    left.setDrawLabels(false);

    // custom X-axis labels
    String[] values = new String[] { "1 star", "2 stars", "3 stars", "4 stars", "5 stars"};
    XAxis xAxis = chart.getXAxis();
    xAxis.setValueFormatter(new MyXAxisValueFormatter(values));

    chart.setData(data);

    // custom description
    Description description = new Description();
    description.setText("Rating");
    chart.setDescription(description);

    // hide legend
    chart.getLegend().setEnabled(false);

    chart.animateY(1000);
    chart.invalidate();

4.最后添加一些自定义类和功能到 Fragment\Activity 与图表：

    public class MyXAxisValueFormatter implements IAxisValueFormatter {

    private String[] mValues;

    public MyXAxisValueFormatter(String[] values) {
        this.mValues = values;
    }

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

}

private ArrayList<BarEntry> getDataSet() {

    ArrayList<BarEntry> valueSet1 = new ArrayList<>();

    BarEntry v1e2 = new BarEntry(1, 4341f);
    valueSet1.add(v1e2);
    BarEntry v1e3 = new BarEntry(2, 3121f);
    valueSet1.add(v1e3);
    BarEntry v1e4 = new BarEntry(3, 5521f);
    valueSet1.add(v1e4);
    BarEntry v1e5 = new BarEntry(4, 10421f);
    valueSet1.add(v1e5);
    BarEntry v1e6 = new BarEntry(5, 27934f);
    valueSet1.add(v1e6);

    return valueSet1;
}

5.我的结果：

Answer 4

因为我无法评论 Aida Drogan 解决方案我 post 这是另一个答案：

为了将标签限制为 5 个并且不重叠，请查看此函数：限制间隔如果您使用基于数组索引的格式化程序（如上），将轴的最小间隔限制为“1”是有意义的：

axis.setGranularity(1f); // restrict interval to 1 (minimum)

这将防止格式化程序绘制重复的轴标签（由轴间隔 < 1 引起）。一旦图表的 "zoom level" 足够高，它将停止重新计算较小的间隔。

Answer 5

2019 解决方案：这是一个库，可以轻松满足您的需求：

Library and setup

在你的根 build.gradle 存储库的末尾：

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

在您的应用程序中 build.gradle：

implementation 'com.github.Inconnu08:android-ratingreviews:1.0.0'

用法

java

        RatingReviews ratingReviews = (RatingReviews) findViewById(R.id.rating_reviews);

        int colors[] = new int[]{
                Color.parseColor("#0e9d58"),
                Color.parseColor("#bfd047"),
                Color.parseColor("#ffc105"),
                Color.parseColor("#ef7e14"),
                Color.parseColor("#d36259")};

        int raters[] = new int[]{
                new Random().nextInt(100),
                new Random().nextInt(100),
                new Random().nextInt(100),
                new Random().nextInt(100),
                new Random().nextInt(100)
        };

        ratingReviews.createRatingBars(100, BarLabels.STYPE1, colors, raters);

xml

    <com.taufiqrahman.reviewratings.RatingReviews
        xmlns:bar="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rating_reviews"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="42dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499"
        bar:animation="true"
        bar:max_value="100"
        bar:show_label="true"
        bar:spaces="0dp"
        bar:text_color="#333333"
        bar:text_size="10sp"
        bar:width="15dp" />

所有颜色和样式都可以更改以适合。更多详细信息 here 如果需要。

如何在 android studio 中实现水平评分条形图？

How to implement horizontal rating bar chart in android studio?

android

android-layout

android-studio

bar-chart

rating

用法