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

问题描述 投票：5回答：5

如何获得这种类型的图表？

我想在我的应用程序中设计并实现一个水平评级条形图，如下图所示。 我遵循了几个教程，但我无法得到正确的解决方案。 rate bar chart

请建议链接或代码。

android android-layout android-studio bar-chart rating
5个回答
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;
    }
}
5
投票

使用此库https://github.com/PhilJay/MPAndroidChart

将其添加到您的应用build.gradle：

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

enter image description here

1
投票

以下是MPAndroidChart库更改后的实际解决方案2017。 1.添加到build.gradle

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

以及你的app 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.我的结果：

Result

1
投票

由于我无法评论Aida Drogan解决方案，我将此作为另一个答案发布：

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

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

这将阻止格式化程序绘制重复的轴标签（由轴间隔<1引起）。只要图表的“缩放级别”足够高，它就会停止重新计算较小的间隔。

1
投票

2019解决方案：这是一个库，可以毫无困难地完成您正在寻找的内容：

Library and setup

enter image description here

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

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

在您的app build.gradle中：

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

Usage

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。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.