看图学MPAndroidChart——LineChart

作者：GogHox
MPAndroidChart版本：v2.1.5

因为是一个项目提供的jar包，所以版本有点旧，现在最高的版本是v3.0.3.

零

记API是很low的做法，所以对着下面这幅图再结合智能提示就很容易猜出方法名了。

Screenshot_1522224398.png

一

来一个最原始的线性图

Screenshot_1522224398.png

public class ChartActivity extends AppCompatActivity {
    private LineChart lineChart;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_chart);
        lineChart = findViewById(R.id.lc);

        ArrayList yEntries = new ArrayList<>();
        yEntries.add(new Entry(10.0f, 0));
        yEntries.add(new Entry(13.0f, 1));
        yEntries.add(new Entry(18.0f, 2));
        yEntries.add(new Entry(8.0f, 3));
        yEntries.add(new Entry(12.0f, 4));
        LineDataSet lineDataSet = new LineDataSet(yEntries, "Y label");
        String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
        LineData lineData = new LineData(xData, lineDataSet);
        lineChart.setData(lineData);
    }

}

二

可能你会发现并不是我们想象中的那样线性图，那么我们需要做些改动，达成下面的效果：

Screenshot_1522225365.png

这样看着就顺眼多了，代码如下：

public class ChartActivity extends AppCompatActivity {
    private LineChart lineChart;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_chart);
        lineChart = findViewById(R.id.lc);

        ArrayList yEntries = new ArrayList<>();
        yEntries.add(new Entry(10.0f, 0));
        yEntries.add(new Entry(13.0f, 1));
        yEntries.add(new Entry(18.0f, 2));
        yEntries.add(new Entry(8.0f, 3));
        yEntries.add(new Entry(12.0f, 4));
        LineDataSet lineDataSet = new LineDataSet(yEntries, "Y label");
        String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
        LineData lineData = new LineData(xData, lineDataSet);
        // 设置坐标轴
        setAxis();
        lineChart.setData(lineData);
    }

    public void setAxis() {
        // 把X轴放到下面
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);

        // 不需要右面显示Y轴
        YAxis axisRight = lineChart.getAxisRight();
        axisRight.setEnabled(false);
    }
}

三

可能你还是会觉得不合你的心意，那么我们接着改

Screenshot_1522373248.png

这样你总能稍微满意了吧~
代码如下：

public class ChartActivity extends AppCompatActivity {
    private LineChart lineChart;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_chart);
        lineChart = findViewById(R.id.lc);

        // y轴数据
        ArrayList yEntries1 = new ArrayList<>();
        yEntries1.add(new Entry(10.0f, 0));
        yEntries1.add(new Entry(13.0f, 1));
        yEntries1.add(new Entry(18.0f, 2));
        yEntries1.add(new Entry(8.0f, 3));
        yEntries1.add(new Entry(12.0f, 4));

        // 新建数据源1
        LineDataSet lineDataSet1 = new LineDataSet(yEntries1, "Y label");
        // 设置数据内容的样式
        lineDataSet1.setColor(Color.GRAY);                     // 设置数据中线的颜色
        lineDataSet1.setDrawValues(false);                     // 设置是否显示数据点的值
        lineDataSet1.setDrawCircleHole(false);                 // 设置数据点是空心还是实心，默认空心
        lineDataSet1.setCircleColor(Color.GREEN);              // 设置数据点的颜色
        lineDataSet1.setCircleSize(3);                         // 设置数据点的大小
        lineDataSet1.setHighLightColor(Color.BLUE);            // 设置点击时高亮的点的颜色

        // x轴数据
        String[] xData = new String[]{"13:00", "14:00", "15:00","16:00", "17:00"};
        LineData lineData = new LineData(xData, lineDataSet1);
        // 设置坐标轴
        setAxis();
        // 设置Legend
        setLegend();
        // 设置默认右下角的描述
        lineChart.setDescription("这是一个表格");

        lineChart.setDragEnabled(false);                   // 不可以拖动
        lineChart.setDoubleTapToZoomEnabled(false);        // 不可以双击缩放

        lineChart.setData(lineData);
    }

    private void setLegend() {
        Legend legend = lineChart.getLegend();
        // legend.setEnabled(false);                                // 不需要Legend
        legend.setTextColor(Color.GREEN);                           // 设置字的颜色
        legend.setForm(Legend.LegendForm.CIRCLE);                   // 设置图形为圆形
        legend.setPosition(Legend.LegendPosition.ABOVE_CHART_RIGHT);
    }

    public void setAxis() {
        // 设置x轴
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);     // 设置x轴的位置
        xAxis.setDrawGridLines(false);                     // 不需要图表内的网格线


        // 获取右边的Y轴并设置
        YAxis axisRight = lineChart.getAxisRight();
        axisRight.setEnabled(false);

        // 获取左边的Y轴
        YAxis axisLeft = lineChart.getAxisLeft();
        axisLeft.setDrawGridLines(false);                  // 不需要图表内的网格线
        axisLeft.setLabelCount(5, true);     // 设置显示的坐标点数量
    }
}

四

额，你还不满意？好吧，满足你，你自己改吧~~
首位呼应，下面是我总结出来的各个部位的设置。

Screenshot_1522224398.png

这是LineChart篇，写得还不是很完整，待我用好了再来补充，喜欢就点个赞哦0_0