Android开发之基于MPAndroidChart实现股票K线图（二）

接上文Android开发之基于MPAndroidChart实现股票K线图（一），在项目中引入了这个框架以后，下面就开始进行具体的代码编写。

1 流程

1.1 原理

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

1.2 控件初始化

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

以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);

Android开发之基于MPAndroidChart实现股票K线图（二）_第1张图片

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);//决定显不显示标签

Android开发之基于MPAndroidChart实现股票K线图（二）_第2张图片

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);）

Android开发之基于MPAndroidChart实现股票K线图（二）_第3张图片

简单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();