web-dev-qa-db-fra.com

Comment créer un graphique à barres avec des barres groupées avec MPAndroidChart?

Comment puis-je comparer deux ensembles de données en utilisant BarChart of MPAndroidChart .

Il devrait ressembler à cette image ci-dessous: enter image description here

J'ai édité un code, je récupère d'un exemple de projet dans github. comment puis-je rassembler 100f and 110f valeur dans un Xaxis label Whole Number

        Score score1 = new Score(100f, 0, "Whole Number");
        mRealm.copyToRealm(score1);
        Score score2 = new Score(110f, 0, "Whole Number");
        mRealm.copyToRealm(score2);
18
Drenyl

Oui, cela peut se faire assez facilement.

Ce dont vous avez besoin est un BarChart avec plusieurs BarDataSets où chaque ensemble (dans votre cas) représente un sexe (hommes ou femmes).

Exemple de code (sans realm.io)

    List<String> xValues = ...; // "Denmark", "Finland", ...

    XAxis xAxis = chart.getXAxis();
    xAxis.setValueFormatter(new MyValueFormatter(xValues));

    // create 2 datasets 
    BarDataSet set1 = new BarDataSet(valuesMen, "Men");
    set1.setColor(Color.BLUE);
    BarDataSet set2 = new BarDataSet(valuesWomen, "Women");
    set2.setColor(Color.RED);

    BarData data = new BarData(set1, set2);
    chart.setData(data);
    chart.groupBars(...); // available since release v3.0.0
    chart.invalidate(); // refresh

Si vous avez besoin d'aide, voici un tutoriel détaillé sur le groupe BarChart disponible sur le wiki.

Si vous souhaitez "empiler" les valeurs dans un BarChart les unes au-dessus des autres, vous devez créer un diagramme à barres empilées: Android Stacked Bars Chart

18
Philipp Jahoda

Puisqu'il y a eu une mise à jour sur le constructeur BarData, vous devez utiliser le code suivant:

        BarChart barChart = (BarChart) view.findViewById(R.id.chart);

        barChart.setDrawBarShadow(false);
        barChart.setDrawValueAboveBar(true);
        barChart.setDescription("");
        barChart.setMaxVisibleValueCount(50);
        barChart.setPinchZoom(false);
        barChart.setDrawGridBackground(false);

        XAxis xl = barChart.getXAxis();
        xl.setGranularity(1f);
        xl.setCenterAxisLabels(true);
        xl.setValueFormatter(new AxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return String.valueOf((int) value);
            }

            @Override
            public int getDecimalDigits() {
                return 0;
            }
        });

        YAxis leftAxis = barChart.getAxisLeft();
        leftAxis.setValueFormatter(new AxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return String.valueOf((int) value);
            }

            @Override
            public int getDecimalDigits() {
                return 0;
            }
        });
        leftAxis.setDrawGridLines(false);
        leftAxis.setSpaceTop(30f);
        leftAxis.setAxisMinValue(0f); // this replaces setStartAtZero(true
        barChart.getAxisRight().setEnabled(false);

        //data
        float groupSpace = 0.04f;
        float barSpace = 0.02f; // x2 dataset
        float barWidth = 0.46f; // x2 dataset
        // (0.46 + 0.02) * 2 + 0.04 = 1.00 -> interval per "group"

        int startYear = 1980;
        int endYear = 1985;


        List<BarEntry> yVals1 = new ArrayList<BarEntry>(); 
        List<BarEntry> yVals2 = new ArrayList<BarEntry>();


        for (int i = startYear; i < endYear; i++) {
            yVals1.add(new BarEntry(i, 0.4f));
        }

        for (int i = startYear; i < endYear; i++) {
            yVals2.add(new BarEntry(i, 0.7f));
        }


        BarDataSet set1, set2;

        if (barChart.getData() != null && barChart.getData().getDataSetCount() > 0) {
            set1 = (BarDataSet)barChart.getData().getDataSetByIndex(0);
            set2 = (BarDataSet)barChart.getData().getDataSetByIndex(1);
            set1.setValues(yVals1);
            set2.setValues(yVals2);
            barChart.getData().notifyDataChanged();
            barChart.notifyDataSetChanged();
        } else {
            // create 2 datasets with different types
            set1 = new BarDataSet(yVals1, "Company A");
            set1.setColor(Color.rgb(104, 241, 175));
            set2 = new BarDataSet(yVals2, "Company B");
            set2.setColor(Color.rgb(164, 228, 251));

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

            BarData data = new BarData(dataSets);
            barChart.setData(data);
        }

        barChart.getBarData().setBarWidth(barWidth);
        barChart.getXAxis().setAxisMinValue(startYear);
        barChart.groupBars(startYear, groupSpace, barSpace);
        barChart.invalidate();

Voilà à quoi cela ressemblera Result

19
lidox

La plupart des réponses que j'ai essayées ont des problèmes comme des étiquettes mal alignées et non centrées ou des barres qui se cachent dans l'espace de l'écran. Donc, après quelques tentatives, j'ai un bon PC de travail.

Les 4 dernières lignes sont les plus importantes.

    ArrayList<BarEntry> barEntries = new ArrayList<>();
    ArrayList<BarEntry> barEntries1 = new ArrayList<>();
    ArrayList<BarEntry> barEntries2 = new ArrayList<>();
    ArrayList<BarEntry> barEntries3 = new ArrayList<>();

    barEntries.add(new BarEntry(1,989.21f));
    barEntries.add(new BarEntry(2,420.22f));
    barEntries.add(new BarEntry(3,758));
    barEntries.add(new BarEntry(4,3078.97f));
    barEntries.add(new BarEntry(5,14586.96f));
    barEntries.add(new BarEntry(6,400.4f));
    barEntries.add(new BarEntry(7,5888.58f));

    barEntries1.add(new BarEntry(1,950));
    barEntries1.add(new BarEntry(2,791));
    barEntries1.add(new BarEntry(3,630));
    barEntries1.add(new BarEntry(4,782));
    barEntries1.add(new BarEntry(5,2714.54f));
    barEntries1.add(new BarEntry(6,500));
    barEntries1.add(new BarEntry(7,2173.36f));

    barEntries2.add(new BarEntry(1,900));
    barEntries2.add(new BarEntry(2,691));
    barEntries2.add(new BarEntry(3,1030));
    barEntries2.add(new BarEntry(4,382));
    barEntries2.add(new BarEntry(5,2714f));
    barEntries2.add(new BarEntry(6,5000));
    barEntries2.add(new BarEntry(7,1173f));

    barEntries3.add(new BarEntry(1,200));
    barEntries3.add(new BarEntry(2,991));
    barEntries3.add(new BarEntry(3,1830));
    barEntries3.add(new BarEntry(4,3082));
    barEntries3.add(new BarEntry(5,214));
    barEntries3.add(new BarEntry(6,5600));
    barEntries3.add(new BarEntry(7,9173));

    BarDataSet barDataSet = new BarDataSet(barEntries,"DATA SET 1");
    barDataSet.setColor(Color.parseColor("#F44336"));
    BarDataSet barDataSet1 = new BarDataSet(barEntries1,"DATA SET 2");
    barDataSet1.setColors(Color.parseColor("#9C27B0"));
    BarDataSet barDataSet2 = new BarDataSet(barEntries2,"DATA SET 3");
    barDataSet1.setColors(Color.parseColor("#e241f4"));
    BarDataSet barDataSet3 = new BarDataSet(barEntries3,"DATA SET 4");
    barDataSet1.setColors(Color.parseColor("#42f46e"));

    String[] months = new String[] {"TYPE 1", "TYPE 2", "TYPE 3", "TYPE 4"};
    BarData data = new BarData(barDataSet,barDataSet1,barDataSet2,barDataSet3);
    barChart.setData(data);

    XAxis xAxis = barChart.getXAxis();
    xAxis.setValueFormatter(new IndexAxisValueFormatter(months));
    barChart.getAxisLeft().setAxisMinimum(0);
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setGranularity(1);
    xAxis.setCenterAxisLabels(true);
    xAxis.setGranularityEnabled(true);

    float barSpace = 0.02f;
    float groupSpace = 0.3f;
    int groupCount = 4;

    //IMPORTANT *****
    data.setBarWidth(0.15f);
    barChart.getXAxis().setAxisMinimum(0);
    barChart.getXAxis().setAxisMaximum(0 + barChart.getBarData().getGroupWidth(groupSpace, barSpace) * groupCount);
    barChart.groupBars(0, groupSpace, barSpace); // perform the "explicit" grouping
    //***** IMPORTANT

et le résultat final que j'ai obtenu est:

Bar graph with labels fixed

8
sudesh
  • Étape 1 Divisez le premier nombre de groupes dans le graphique à barres. Comme ci-dessous, un exemple de code s'affiche pour 5 groupes. Chaque groupe contient 5 barres.

               xaxis0 = new ArrayList<>();
               for (int i = 0; i < cData.size(); i++) {
    
                   String str = cData.get(i).get("count");
                   str = str.replaceAll("\\[", "").replaceAll("\\]", "");
                   String[] finalString = str.split(",");
                   if (i == 0) {
                       for (int k = 0; k < finalString.length; k++) {
    
                           int data22 = Integer.parseInt(finalString[k]);
                           BarEntry v1e1 = new BarEntry(data22, position);
                           valueSet1.add(v1e1);
                       }
                   }
                   if (i == 1) {
                       for (int k = 0; k < finalString.length; k++) {
                           int data22 = Integer.parseInt(finalString[k] + "");
                           BarEntry v1e1 = new BarEntry(data22, position);
                           valueSet2.add(v1e1);
                       }
                   }
                   if (i == 2) {
                       for (int k = 0; k < finalString.length; k++) {
                           int data22 = Integer.parseInt(finalString[k] + "");
                           BarEntry v1e1 = new BarEntry(data22, position);
                           valueSet3.add(v1e1);
                       }
                   }
                   if (i == 3) {
                       for (int k = 0; k < finalString.length; k++) {
                           int data22 = Integer.parseInt(finalString[k] + "");
                           BarEntry v1e1 = new BarEntry(data22, position);
                           valueSet4.add(v1e1);
                       }
                   }
                   if (i == 4) {
                       for (int k = 0; k < finalString.length; k++) {
                           int data22 = Integer.parseInt(finalString[k] + "");
                           BarEntry v1e1 = new BarEntry(data22, position);
                           valueSet5.add(v1e1);
                       }
                   }
                   xaxis0.add(i, xdata.get(i).get("date"));
    
  • Step2 Dans le code ci-dessus, vous observez que 5 groupes d'entrées de barres chargent des données en boucle de chaque ensemble de valeurs - ArrayList valueSet2 = new ArrayList <> (); Initialiser avant cet ensemble de valeurs et

  • Etape 3 Et chargez ces 5 ensembles sur Bardataset comme ci-dessous

    `BarDataSet barDataSet1 = new BarDataSet (valueSet1," Set1 "); barDataSet1.setColors (whitecolors); barDataSet1.setValueTextColor (Color.WHITE);

    BarDataSet barDataSet2 = new BarDataSet (valueSet2, "Set2"); barDataSet2.setColors (whitecolors); barDataSet2.setValueTextColor (Color.WHITE);

    BarDataSet barDataSet3 = new BarDataSet (valueSet3, "Set3"); barDataSet3.setColors (whitecolors);

    barDataSet3.setValueTextColor (Color.WHITE); BarDataSet barDataSet4 = nouveau BarDataSet (valueSet4, "Set4");

    barDataSet4.setColors (whitecolors); barDataSet4.setValueTextColor (Color.WHITE);

    BarDataSet barDataSet5 = nouveau BarDataSet (valueSet5, "Set5"); barDataSet5.setColors (whitecolors);

    barDataSet5.setValueTextColor (Color.WHITE); dataSets = new ArrayList <> (); dataSets.add (barDataSet1); dataSets.add (barDataSet2); dataSets.add (barDataSet3); dataSets.add (barDataSet4); dataSets.add (barDataSet5); "

  • Dernière étape, vous devez joindre ces données à Bardata comme le code ci-dessous

BarData data11 = nouveau BarData (xaxis0, dataSets); data11.setGroupSpace (100f);

               holder.chart.setData(data11);

               XAxis xAxis = holder.chart.getXAxis();

               xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

               xAxis.setDrawGridLines(true);  

xAxis.setGridColor (context.getResources (). getColor (R.color.white));

               xAxis.isDrawLabelsEnabled();    

xAxis.setAxisLineColor (context.getResources (). getColor (R.color.accentColor)); xAxis.setTextColor (context.getResources (). getColor (R.color.white));

               xAxis.isAdjustXLabelsEnabled();

               xAxis.setAdjustXLabels(true);

               holder.chart.setDescription("");

               holder.chart.animateXY(2000, 2000);
 holder.chart.getAxisLeft().setTextColor(context.getResources().getColor(R.color.white));
               holder.chart.getAxisRight().setTextColor(context.getResources().getColor(R.color.white));
               holder.chart.setDrawGridBackground(false);
               holder.chart.getAxisRight().setEnabled(false);
               holder.chart.setDrawValueAboveBar(true);
               holder.chart.getAxisLeft().setEnabled(false);
               holder.chart.setSoundEffectsEnabled(true);
               holder.chart.getXAxis().setDrawGridLines(false);
               holder.chart.setTransitionGroup(true);
               YAxis yAxis = holder.chart.getAxisLeft();
               yAxis.setDrawGridLines(false);
               yAxis.setLabelCount(5);
               yAxis = holder.chart.getAxisRight();
               yAxis.setDrawGridLines(false);
               yAxis.setTextColor(context.getResources().getColor(R.color.white));
               Legend l =  holder.chart.getLegend();
               l.setEnabled(false);     
               Paint p = holder.chart.getPaint(Chart.Paint_INFO);
               p.setTextSize(10);
               p.setColor(context.getResources().getColor(R.color.white));
               p.setTypeface(gotham);
               holder.chart.invalidate();
               l.setPosition(Legend.LegendPosition.BELOW_CHART_CENTER);
               l.setTextSize(200);
               yAxis.setValueFormatter(new LargeValueFormatter());

   # Thats it if you have doubt about this code ask me any time .......
2
Venkatesh