条形图和线形图的组合图

一图胜千文，纯粹的数据枯燥、无聊，让人看不下去，改变一下形式，用图表装饰一下，立马有趣多了。既然有这样的外部需求，Android世界里肯定要有图表库才行，今天解析的就是其中最强大的一个MPAndroidChart。

GitHub地址：https://github.com/PhilJay/MPAndroidChart

核心功能

• 支持以下图表：
  • Line Chart（线图）
  • Bar Chart（条形图，又称柱状图）
  • Combined Chart（组合图：线性+条形）
  • Pie Chart（饼状图）
  • Scatter Chart（散点图）
  • Bubble Chart（气泡图）
  • Stacked Bar Chart（堆积条形图）
  • Candle Stick Chart（蜡烛图）
  • Cubic Line Chart（立方拟合的折线图）
  • Radar Chart（雷达图）
  • Realtime Chart（实时折线图）
  • Sinus Bar Chart（正弦柱状图）
• 支持以下操作和设置：
  • 支持x，y轴缩放
  • 支持拖拽
  • 支持手指滑动
  • 支持高亮显示
  • 支持保存图表到文件中
  • 支持从文件（txt）中读取数据
  • 预先定义颜色模板
  • 自动生成标注
  • 支持自定义x，y轴的显示标签
  • 支持x，y轴动画
  • 支持x，y轴设置最大值和附加信息
  • 支持自定义字体，颜色，背景，手势，虚线等

集成和使用

总共有四种方式集成，推荐直接用Gradle依赖

1. 在project根目录的build.gradle添加中央库地址

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

2. 在项目build.gradle中添加相关依赖:

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
}

3. 在xml文件定义图表类型，比如LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart or RadarChart

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

4. 基础设置

mChart = (LineChart) findViewById(R.id.chart1);
        mChart.setOnChartGestureListener(this);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setDrawGridBackground(false);

        // no description text
        mChart.setDescription("");
        mChart.setNoDataTextDescription("You need to provide data for the chart.");

        // enable touch gestures
        mChart.setTouchEnabled(true);

        // enable scaling and dragging
        mChart.setDragEnabled(true);
        mChart.setScaleEnabled(true);
        // mChart.setScaleXEnabled(true);
        // mChart.setScaleYEnabled(true);

        // if disabled, scaling can be done on x- and y-axis separately
        mChart.setPinchZoom(true);

        // set an alternative background color
        // mChart.setBackgroundColor(Color.GRAY);

        // create a custom MarkerView (extend MarkerView) and specify the layout
        // to use for it
        MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);

        // set the marker to the chart
        mChart.setMarkerView(mv);

5. 设置数据源：各种图表的数据不太一致，对于LineChart而言，就是一系列的（x,y）

/**
     * 设置模拟数据
     * @param count 模拟的个数
     * @param range 数据的范围
     */
    private void setData(int count, float range) {

        ArrayList<Entry> values = new ArrayList<Entry>();

        for (int i = 0; i < count; i++) {

            float val = (float) (Math.random() * range) + 3;
            values.add(new Entry(i, val));
        }

        LineDataSet set1;

        if (mChart.getData() != null &&
                mChart.getData().getDataSetCount() > 0) {
            set1 = (LineDataSet)mChart.getData().getDataSetByIndex(0);
            set1.setValues(values);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            // create a dataset and give it a type
            set1 = new LineDataSet(values, "DataSet 1");

            // set the line to be drawn like this "- - - - - -"
            set1.enableDashedLine(10f, 5f, 0f);
            set1.enableDashedHighlightLine(10f, 5f, 0f);
            set1.setColor(Color.BLACK);
            set1.setCircleColor(Color.BLACK);
            set1.setLineWidth(1f);
            set1.setCircleRadius(3f);
            set1.setDrawCircleHole(false);
            set1.setValueTextSize(9f);
            set1.setDrawFilled(true);

            if (Utils.getSDKInt() >= 18) {
                // fill drawable only supported on api level 18 and above
                Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
                set1.setFillDrawable(drawable);
            }
            else {
                set1.setFillColor(Color.BLACK);
            }

            ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
            dataSets.add(set1); // add the datasets

            // create a data object with the datasets
            LineData data = new LineData(dataSets);

            // set data
            mChart.setData(data);
        }
    }

此处源码，参考Demo中的LineChartActivity1

最后样式如下：

线图

Demo概览

Demo提供32个样例：

1. Line Chart：演示一个简单的线图
2. Line Chart (Dual YAxis)：演示一个有两个Y轴线图
3. Bar Chart：演示一个柱状图
4. Horizontal Bar Chart：演示水平柱状图，即X轴和Y轴反过来。
5. Combined Chart：演示 线图、柱状图、蜡烛图、气泡图 如何叠加在一起显示
6. Pie Chart：演示简易饼状图
7. Pie Chart with value lines：演示带数据线的饼状图
8. Scatter Chart：演示了 圆点、方点、斜线 这三种样式的散点图
9. Bubble Chart: 演示了不同颜色的气泡图。
10. Stacked Bar Chart: 演示了堆积条形图
11. Stacked Bar Chart Negative：演示了有负数数值的堆积条形图
12. Another Bar Chart：只在底部显示值的柱状图。
13. Multiple Lines Chart：3条线图混合在一起，用颜色和实线、虚线来区分
14. Multiple Bars Chart：不同年份、不同公司的数据组成的柱状图
15. Charts in ViewPager Fragments：结合ViewPager、Fragment，透过左右滑动查看不同的图表。
16. BarChart inside ListView：柱状图如何嵌入在ListView中
17. Multiple charts inside ListView：不同类型的图表如何嵌入在ListView中
18. Inverted Line Chart：演示（0，0）在左上角的线图
19. Candle Stick Chart: 演示蜡烛图
20. Cubic Line Chart：演示 立方拟合的折线图
21. Radar Chart：演示雷达图
22. Colored Line Chart：在不同背景色上演示同一张线图
23. Realtime Chart：实时产生数据，进行演示。
24. Dynamical data adding：实时产生数据集和数据，进行演示。
25. Performance Line Chart：用30000个数据来测试性能。
26. Sinus Bar Chart：演示正弦柱状图。
27. Chart in ScrollView：演示如何把图表放在ScrollView中。
28. BarChart positive / negative：演示有负值的柱状图。
29. Realm.io Database：演示如何从Realm数据库中获取数据进行展示（里面有9个案例）。
30. Time Chart：演示时间图。
31. Filled LineChart：演示如何填满两条线图中间的部分。
32. Half PieChart：演示一个半圆的饼状图。

参考：

1. zhuanghongji·MPAndroidChart 图表库的API练习
2. android开源图表库MPAndroidChart

Panda
2016-08-03