我該如何實現條形圖

Question

我想在Android應用程序中使用適合的一些免費圖表引擎顯示條形圖。 這是我如何檢查圖是：

我想使用以下功能。

添加onclick到每個酒吧（紅色，藍色，綠色）。

在頂部而不是底部顯示圖例。

在Y軸它顯示我想顯示1個值 - 200

和點擊數在每個柱的頂部顯示的值。

我已經調查Achart engine，但它並沒有條形圖這樣。

請幫助我。

Answer 1

請參閱此。我認爲這會幫助你。 http://wptrafficanalyzer.in/blog/android-drawing-bar-chart-using-achartengine/

Bar Chart in Android With out any Built in jars

Answer 2

我這樣做是有MPAndroiChart。有關完整的解決方案，請參閱Github中的我的MPAndroidChart-barchart項目。

這裏的結果：

下面是條形圖一些代碼片段：

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(); 

要顯示值當欄點擊，我實現定製MarkerView ：

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()); 
    } 
} 

希望得到這個幫助。