1 流程

1.1 原理

MPAndroidChart所提供的各种图表其实就是一种自定义控件，例如LineChart(折线图)、BarChart(直方图)以及准备要使用的CandleStickChart(蜡烛图)。

1.2 控件初始化

我们在布局xml文件中或在Activity代码里，去创建这些图表控件实例，然后在代码中进行一些基本交互设置。

android:id="@+id/candler_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

以CandleStickChart为例：

1.2.1 基本设置

mChart.setStartAtZero(true);
mChart.setDrawYValues(false); // disable the drawing of values into the mChart
mChart.setDrawBorder(false); //是否在折线图上添加边框
mChart.setDescription("");// 数据描述
mChart.setNoDataTextDescription("You need to provide data for the mChart."); //如果没有数据的时候，会显示这个，类似listview的emtpyview
mChart.setDrawVerticalGrid(false); // enable / disable grid lines
mChart.setDrawHorizontalGrid(false);
mChart.setDrawGridBackground(false); // 是否显示表格颜色
mChart.setBackgroundColor(color);// 设置背景
mChart.setGridBackgroundColor(color);//设置表格背景色
mChart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格线的颜色，在这里是是给颜色设置一个透明度
mChart.setGridWidth(1.25f);// 表格线的线宽
mChart.setTouchEnabled(true); // enable touch gestures
mChart.setDragEnabled(true);// 是否可以拖拽
mChart.setScaleEnabled(true);// 是否可以缩放
mChart.setPinchZoom(false);// if disabled, scaling can be done on x- and y-axis separately
mChart.setScaleYEnabled(false);// if disabled, scaling can be done on x-axis
mChart.setScaleXEnabled(false);// if disabled, scaling can be done on y-axis
mChart.setValueTypeface(mTf);// 设置字体
// animate calls invalidate()...
mChart.animateX(2500); // 立即执行的动画,x轴

1.2.2 XY轴设置

X轴

XAxis xAxis =mChart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setDrawGridLines(true);
xAxis.setSpaceBetweenLabels(12);//轴刻度间的宽度，默认值是4
xAxis.setGridColor(colorLine);//X轴刻度线颜色
xAxis.setTextColor(colorText);//X轴文字颜色

Y轴(可以设置左右两个Y轴)

YAxis leftAxis = mChart.getAxisLeft();
leftAxis.setEnabled(true);
leftAxis.setLabelCount(7,false);
leftAxis.setDrawGridLines(true);
leftAxis.setDrawAxisLine(false);
leftAxis.setGridColor(colorLine);
leftAxis.setTextColor(colorText);
YAxis rightAxis =mChart.getAxisRight();
rightAxis.setEnabled(false);

Y轴示意图.png

1.2.3 图例标识设置

// get the legend (only possible after setting data)
Legend l = mChart.getLegend(); // 设置比例图标示
l.setPosition(LegendPosition.BELOW_CHART_RIGHT); //显示位置
l.setForm(LegendForm.SQUARE);// 样式
l.setFormSize(6f);// 字号
l.setTextColor(Color.WHITE);// 颜色
l.setTypeface(mTf);// 字体
List labels=new ArrayList<>();
labels.add("红涨");
labels.add("绿跌");
List colors=new ArrayList<>();
colors.add(Color.RED);
colors.add(Color.GREEN);
l.setExtra(colors,labels);//设置标注的颜色及内容，设置的效果如下图
l.setEnabled(false);//决定显不显示标签

Legend示意图

1.3 传入数据，生成图表

CandleEntry是每一天股票价格的数据模型

public class CandleEntry extends Entry {
private float mShadowHigh = 0.0F;//当天最高价(蜡烛图上影线)
private float mShadowLow = 0.0F;//当天最低价(蜡烛图下影线)
private float mClose = 0.0F;//收盘价
private float mOpen = 0.0F;//开盘价
···
}

//模拟获得数据

List yVals1= Model.getCandleEntries();
CandleDataSet 类可以对图表的元素样式进行设置(例如 涨跌颜色、影线颜色等)
CandleDataSet set = new CandleDataSet(yVals1, "Data Set");
set.setAxisDependency(YAxis.AxisDependency.LEFT);
set.setShadowColor(Color.DKGRAY);//影线颜色
set.setShadowColorSameAsCandle(true);//影线颜色与实体一致
set.setShadowWidth(0.7f);//影线
set.setDecreasingColor(Color.RED);
set.setDecreasingPaintStyle(Paint.Style.FILL);//红涨，实体
set.setIncreasingColor(Color.GREEN);
set.setIncreasingPaintStyle(Paint.Style.STROKE);//绿跌，空心
set.setNeutralColor(Color.RED);//当天价格不涨不跌(一字线)颜色
set.setHighlightLineWidth(1f);//选中蜡烛时的线宽
set.setDrawValues(false);//在图表中的元素上面是否显示数值
set.setLabel(“label");//图表名称，可以通过mChart.getLegend().setEnable(true)显示在标注上

简单粗暴地通过set方法设置数据

CandleData data = new CandleData(xVals, set);
mChart.setData( data);

1.4 效果展示

像手势缩放、XY轴方向平移这些基本交互，框架已经帮我们实现。

当然这只是一个简单的demo，距离实际需求还有很大的差距，坑也是有的，例如：

只能通过一个方法set.setShadowColor(Color.DKGRAY);设置上影线/下影线颜色，如图 上影线/下影线都是黑色的，而不是随着当天的涨跌情况红杖绿跌，十分不和谐！

(此坑已填：set.setShadowColorSameAsCandle(true);)

简单K线图.png

1.5 其他

1.5.1 动画

animateX(int durationMillis) : x轴方向

animateY(int durationMillis) : y轴方向

animateXY(int xDuration, int yDuration) : xy轴方向

1.5.2 获取图表相关的数据

mChart.getCandleData();
mChart.getYChartMax();
mChart.getYChartMin();
mChart.getXChartMax();
mChart.getXChartMin();