接上文Android开发之基于MPAndroidChart实现股票K线图（一），在项目中引入了这个框架以后，下面就开始进行具体的代码编写。
1 流程
1.1 原理
MPAndroidChart所提供的各种图表其实就是一种自定义控件，例如LineChart(折线图）、BarChart（直方图）以及准备要使用的CandleStickChart（蜡烛图）。
1.2 控件初始化
我们在布局xml文件中或在Activity代码里，去创建这些图表控件实例，然后在代码中进行一些基本交互设置。
<com.github.mikephil.charting.charts.CandleStickChart
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<String> labels=new ArrayList<>();
labels.add("红涨");
labels.add("绿跌");
List<Integer> 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<CandleEntry> 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();
