comment puis-je mettre en œuvre graphique à barres

Question

je veux afficher graphique à barres dans l'application Android en utilisant un moteur de graphique libre qui convient. c'est ainsi que j'excepte le graphique pour être:

J'essaye de faire avec les dispositifs suivants.

Ajouter un clic sur chaque barre (rouge, bleu, vert).

Afficher la légende en haut plutôt qu'en bas.

Dans l'axe Y, il affiche des valeurs que je veux afficher 1 - 200.

Et onlick afficher les valeurs au-dessus de chaque barre.

i ont examiné Achart engine mais il ne dispose pas d'un graphique à barres comme celui-ci.

aidez-moi s'il vous plaît à ce sujet.

Answer 1

référez-vous à cela. Je crois que ceci vous aidera. http://wptrafficanalyzer.in/blog/android-drawing-bar-chart-using-achartengine/

Bar Chart in Android With out any Built in jars

Answer 2

Je l'ai fait avec MPAndroiChart. Pour une solution complète, veuillez vous référer à mon projet MPAndroidChart-barchart dans Github.

Voici le résultat:

Voici quelques extrait de code pour Bar Chart:

mChart = (BarChart) findViewById(R.id.chart); 

final ArrayList<BarEntry> bar1List = new ArrayList<>(); 
final ArrayList<BarEntry> bar2List = new ArrayList<>(); 
final ArrayList<BarEntry> bar3List = new ArrayList<>(); 
final ArrayList<String> xLabels = new ArrayList<>(); 

for (int i = 0; i < 3; i++) { 
    bar1List.add(new BarEntry(i, (float) randInt())); 
    bar2List.add(new BarEntry(i, (float) randInt())); 
    bar3List.add(new BarEntry(i, (float) randInt())); 

    xLabels.add("entry " + i); 
} 

BarDataSet bar1Set = new BarDataSet(bar1List, "Bar 1"); 
bar1Set.setColor(bar1Color); 
bar1Set.setAxisDependency(YAxis.AxisDependency.LEFT); 
bar1Set.setDrawValues(false); 

BarDataSet bar2Set = new BarDataSet(bar2List, "Bar 2"); 
bar2Set.setColor(bar2Color); 
bar2Set.setAxisDependency(YAxis.AxisDependency.LEFT); 
bar2Set.setDrawValues(false); 

BarDataSet bar3Set = new BarDataSet(bar3List, "Bar 3"); 
bar3Set.setColor(bar3Color); 
bar3Set.setAxisDependency(YAxis.AxisDependency.LEFT); 
bar3Set.setDrawValues(false); 

// (0.20 + 0.05) * 3 + 0.25 = 1.00 -> interval per "group" 
final float groupSpace = 0.25f; 
final float barSpace = 0.05f; 
final float barWidth = 0.2f; 

BarData barData = new BarData(bar1Set, bar2Set, bar3Set); 
barData.setBarWidth(barWidth); 

// make this BarData object grouped 
barData.groupBars(0, groupSpace, barSpace); // start at x = 0 

mChart.setData(barData); 

mChart.getDescription().setEnabled(false); 
mChart.setBackgroundColor(backgroundColor); 
mChart.setDrawGridBackground(false); 
mChart.setDrawBarShadow(false); 
mChart.setDoubleTapToZoomEnabled(false); 
mChart.setPinchZoom(false); 
mChart.setScaleEnabled(false); 

// show legend on Top Left 
Legend legend = mChart.getLegend(); 
legend.setEnabled(true); 
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL); 
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT); 
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP); 

YAxis leftAxis = mChart.getAxisLeft(); 
leftAxis.setDrawGridLines(false); 
leftAxis.setDrawAxisLine(false); 
leftAxis.setDrawLabels(true); 
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); 
leftAxis.setValueFormatter(new LargeValueFormatter()); 
// show range: 0 -> 200 
leftAxis.setAxisMaximum(200); 

XAxis xAxis = mChart.getXAxis(); 
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); 
xAxis.setDrawGridLines(false); 
xAxis.setDrawAxisLine(false); 
xAxis.setCenterAxisLabels(true); 
xAxis.setAxisMinimum(0); 
xAxis.setGranularity(1f); 
xAxis.setTextSize(12); 
xAxis.setAxisMaximum(barData.getXMax() + 1); 
xAxis.setLabelRotationAngle(-40f); 

IAxisValueFormatter xAxisFormatter = new IAxisValueFormatter() { 
    @Override 
    public String getFormattedValue(float value, AxisBase axis) { 
     if (value >= 0 && value <= xLabels.size() - 1) { 
      return xLabels.get((int) value); 
     } 

     // to avoid IndexOutOfBoundsException on xLabels, if (value < 0 || value > xLabels.size() - 1) 
     return ""; 
    } 
}; 

xAxis.setValueFormatter(xAxisFormatter); 

// display value during highlight 
YMarkerView mv = new YMarkerView(this); 
mv.setChartView(mChart); // For bounds control 
mChart.setMarker(mv);  // Set the marker to the chart 

mChart.invalidate(); 

Pour valeur d'affichage lorsque la barre est cliqué, j'ai mis MarkerView sur mesure :

package com.example.shuwnyuan.barchart; 

import android.content.Context; 
import android.widget.TextView; 

import com.github.mikephil.charting.components.MarkerView; 
import com.github.mikephil.charting.data.Entry; 
import com.github.mikephil.charting.highlight.Highlight; 
import com.github.mikephil.charting.utils.MPPointF; 


/** 
* Custom implementation of the MarkerView. 
* 
* @author Shuwn Yuan Tee 
*/ 
public class YMarkerView extends MarkerView { 
    private TextView tvContent; 

    public YMarkerView(Context context) { 
     super(context, R.layout.custom_marker_view); 
     tvContent = findViewById(R.id.tvContent); 
    } 

    // callbacks everytime the MarkerView is redrawn, can be used to update the 
    // content (user-interface) 
    @Override 
    public void refreshContent(Entry e, Highlight highlight) { 
     tvContent.setText("" + (int)e.getY()); 

     super.refreshContent(e, highlight); 
    } 

    @Override 
    public MPPointF getOffset() { 
     return new MPPointF(-(getWidth()/2), -getHeight()); 
    } 
} 

Espérons que cette aide.