android MPAndroidChart 实现多图表展示

558 阅读2分钟

基于android MPAndroidChart实现多图表展示,效果如下:

image.png

代码如下: xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
  >
    <com.github.mikephil.charting.charts.CombinedChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="500dp"/>
</LinearLayout>

java 代码:

public class MainActivity3 extends AppCompatActivity {
    protected String[] suppliers = new String[]{
            "鸿兴", "利科", "大阪", "沃佳尔", "大唐", "聚科", "其他", "联博", "聚源升", "尹信达"
    };
    CombinedChart combinedChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        combinedChart = (CombinedChart) findViewById(R.id.chart);
        combinedChart.setDrawBorders(true); // 显示边界
        combinedChart.getDescription().setEnabled(false);  // 不显示备注信息
        combinedChart.setPinchZoom(true); // 比例缩放
        combinedChart.animateY(1500);
        XAxis xAxis = combinedChart.getXAxis();
        xAxis.setDrawGridLines(false);
        /*解决左右两端柱形图只显示一半的情况 只有使用CombinedChart时会出现,如果单独使用BarChart不会有这个问题*/
        xAxis.setAxisMinimum(-0.5f);
        xAxis.setAxisMaximum(suppliers.length - 0.5f);

        xAxis.setLabelCount(suppliers.length); // 设置X轴标签数量
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); // 设置X轴标签位置,BOTTOM在底部显示,TOP在顶部显示
        combinedChart.getXAxis().setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                if (value < 0) {
                    return "";
                }
                int index = (int) value;
                if (index < 0 || index >= suppliers.length) {
//                    return "" + (int) value;
                    return "";
                }
                return suppliers[index];
            }
        });
        YAxis axisLeft = combinedChart.getAxisLeft(); // 获取左边Y轴操作类
        axisLeft.setAxisMinimum(0); // 设置最小值
        axisLeft.setGranularity(5); // 设置Label间隔
        axisLeft.setLabelCount(5);// 设置标签数量
        YAxis axisRight = combinedChart.getAxisRight(); // 获取右边Y轴操作类
        axisRight.setStartAtZero(false);//就是这句话就OK了
        axisRight.setDrawGridLines(false); // 不绘制背景线,上面左边Y轴并没有设置此属性,因为不设置默认是显示的
        axisRight.setGranularity(5); // 设置Label间隔
        axisRight.setAxisMinimum(-10); // 设置最小值
        axisRight.setLabelCount(5); // 设置标签个数
        YAxis yAxis = combinedChart.getAxisLeft();
        yAxis.setStartAtZero(false);//就是这句话就OK了

        /**
         * 初始化柱形图的数据
         * 此处用suppliers的数量做循环,因为总共所需要的数据源数量应该和标签个数一致
         * 其中BarEntry是柱形图数据源的实体类,包装xy坐标数据
         */
        /******************BarData start********************/
        List<BarEntry> barEntries = new ArrayList<>();
        List<BarEntry> barEntries1 = new ArrayList<>();
        BarData barData = new BarData();
        for (int i = 0; i < suppliers.length; i++) {
            barEntries.add(new BarEntry(i, getRandom(20, 50)));
//            barEntries1.add(new BarEntry(i, getRandom(250, 50)));
        }
        BarDataSet barDataSet = new BarDataSet(barEntries, "看护后心情值");  // 新建一组柱形图,"LAR"为本组柱形图的Label
        barDataSet.setColor(Color.parseColor("#fc8428")); // 设置柱形图颜色
        barDataSet.setValueTextColor(Color.parseColor("#fc8428")); //  设置柱形图顶部文本颜色
//        barData.addDataSet(barDataSet);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
          for (int i = 0; i < suppliers.length; i++) {
            barEntries1.add(new BarEntry(i, getRandom(-50, 10)));
        }
        BarDataSet barDataSet1 = new BarDataSet(barEntries1, "看护前心情值");  // 新建一组柱形图,"LAR"为本组柱形图的Label
        barDataSet1.setColor(Color.parseColor("#0985e3")); // 设置柱形图颜色
        barDataSet1.setValueTextColor(Color.parseColor("#0985e3")); //  设置柱形图顶部文本颜色
        barData.addDataSet(barDataSet);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
        barData.addDataSet(barDataSet1);// 添加一组柱形图,如果有多组柱形图数据,则可以多次addDataSet来设置
        
        /******************BarData end********************/

        /**
         * 初始化折线图数据
         * 说明同上
         */
        /******************LineData start********************/
        List<Entry> lineEntries = new ArrayList<>();
        for (int i = 0; i < suppliers.length; i++) {
            lineEntries.add(new Entry(i, getRandom(10, 0)));
        }
        LineDataSet lineDataSet = new LineDataSet(lineEntries, "心情变化值");
        lineDataSet.setColor(Color.parseColor("#b71c1c"));
        lineDataSet.setCircleColor(Color.parseColor("#b71c1c"));
        lineDataSet.setValueTextColor(Color.parseColor("#f44336"));
        lineDataSet.setLineWidth(3f);
        lineDataSet.setHighlightEnabled(false);
        LineData lineData = new LineData();
        lineData.addDataSet(lineDataSet);
        /******************LineData end********************/

        CombinedData combinedData = new CombinedData(); // 创建组合图的数据源
        combinedData.setData(barData);  // 添加柱形图数据源
        combinedData.setData(lineData); // 添加折线图数据源
        combinedChart.setData(combinedData); // 为组合图设置数据源

    }
    protected float getRandom(float range, float startsfrom) {
        return (float) (Math.random() * range) + startsfrom;
    }
}

end:
java类比较粗糙,需要简洁的话,请自行封装。