MPAndroidChart BarChart - 是否可以显示两组具有不同 Y 值的数据集？

Question

我想知道，在 MPAndroidChart 的 BarChart 中，是否可以显示两组具有不同 Y 值的 DataSet？我希望一组在左侧 Y 轴上显示距离，另一组在右侧 Y 轴上显示百分比。我在网上找不到任何这样的例子，所以我不确定是否可能。

如果可以的话，有人知道怎么做吗？

Answer 1

是的，这是可能的。您必须使用组合图表，您还可以为一个数据集设置左轴，为第二个数据集设置右轴。

按照下面的例子：

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

import com.github.mikephil.charting.charts.CombinedChart;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.CombinedData;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    CombinedChart combinedChart = (CombinedChart) findViewById(R.id.chart1);
    CombinedData data = new CombinedData();
    data.setData(barData());
    data.setData(lineData());
    combinedChart.setData(data);

    // xAxis customization
    XAxis xAxis = combinedChart.getXAxis();

    // Following code have no effect but you can change it if required
    xAxis.setGranularity(1f);
    xAxis.setGranularityEnabled(true);
    xAxis.setCenterAxisLabels(false);
    xAxis.setDrawGridLines(false);


    // Setting maximum limit of xAxis
    xAxis.setAxisMaximum(barData().getEntryCount());

    // Setting position of xAxis
    xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);

    // This is used to fix bar width of first bar
    xAxis.setSpaceMin(barData().getBarWidth() / 2f);
    xAxis.setSpaceMax(barData().getBarWidth() / 2f);

    // Setting labels to xAxis
    xAxis.setValueFormatter(new IndexAxisValueFormatter(getXAxisValues()));

    // create a MarkerView
    MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker);
    combinedChart.setMarker(mv);

}

// creating list of x-axis values 
private ArrayList<String> getXAxisValues()
{
    ArrayList<String> labels = new ArrayList<String> ();

    labels.add( "JAN");
    labels.add( "FEB");
    labels.add( "MAR");
    labels.add( "APR");
    labels.add( "MAY");
    labels.add( "JUN");
    return labels; 
}

// this method is used to create data for line graph 
public LineData lineData()
{
    ArrayList<Entry> line = new ArrayList<Entry> ();
    line.add(new Entry(0, 10));
    line.add(new Entry(1, 11));
    line.add(new Entry(2, 12));
    line.add(new Entry(3, 14));
    line.add(new Entry(4, 18));
    line.add(new Entry(5, 31));

    LineDataSet lineDataSet = new LineDataSet(line, "Brand 2");
    lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
    lineDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
    lineDataSet.setCircleRadius(5);

    lineDataSet.setHighlightEnabled(true); // allow highlighting for DataSet

    lineDataSet.setDrawHighlightIndicators(true);
    lineDataSet.setHighLightColor(Color.RED);
    LineData lineData = new LineData(lineDataSet);
    return lineData;
}

// this method is used to create data for Bar graph 
public BarData barData()
{
    ArrayList<BarEntry> group1 = new ArrayList<BarEntry>();
    group1.add(new BarEntry(0, 3));
    group1.add(new BarEntry(1, 1));
    group1.add(new BarEntry(2, 4));
    group1.add(new BarEntry(3, 7));
    group1.add(new BarEntry(4, 3));
    group1.add(new BarEntry(5, 8));

    BarDataSet barDataSet = new BarDataSet(group1, "Brand 1");
    barDataSet.setAxisDependency(YAxis.AxisDependency.RIGHT);
    //barDataSet.setColor(Color.rgb(0, 155, 0));
    barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);

    BarData barData = new BarData(barDataSet);
    //        barData.setBarWidth(0.9f);

    return barData;
}
} 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

</RelativeLayout>

custom_marker.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp"
android:layout_height="40dp"
android:background="@color/colorPrimary"
>

<TextView
    android:id="@+id/tvContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerHorizontal="true"
    android:text=""
    android:textSize="12dp"
    android:textColor="@android:color/black"
    android:ellipsize="end"
    android:singleLine="true"
    android:textAppearance="?android:attr/textAppearanceSmall" />

 </RelativeLayout>

MyMarkerView.java

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;

/**
 * Created by saad.rafique on 1/5/2018.
 */

public class MyMarkerView extends MarkerView {

private TextView tvContent;

public MyMarkerView(Context context, int layoutResource) {
    super(context, layoutResource);
    // this markerview only displays a textview
    tvContent = (TextView) 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("x: " + e.getX() + " , y: " + e.getY()); // set the entry-value as the display text
}

}

还可以访问以下链接以获取组栏和 google 堆叠栏：

http://happytutorialcode.blogspot.com/2017/03/android-grouped-bar-chart-customized-x.html

https://github.com/PhilJay/MPAndroidChart/blob/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample/BarChartActivityMultiDataset.java

https://www.numetriclabz.com/android-bar-chart-using-mpandroidchart-library-tutorial/