公司项目使用RN实现的k线图效果不忍直视，调试过很多个版本都没有达到理想的效果，于是想用原生来实现。经过调研选用的MPAndroidChart库(Github:https://github.com/PhilJay/MPAndroidChart), 实现效果还是挺满意的，虽然后来原生项目死掉了。。。但毕竟也花了时间，这里准备把在使用过程中遇到的疑难点整理成系列博文，基础的api介绍网上到处都是就不写了，希望能帮到有需要的人。
GitHub地址
自定义股线图StockChart
MPAndroidChart绘制K线图（一）高亮线自定义
MPAndroidChart绘制K线图（二）动态时间格式+高亮时底部滑动时间刻度
MPAndroidChart绘制K线图（三）长按高亮，双击事件，缩放中心点变换，图表联动，跨表缩放失效
效果图
一、MpAndroidChart根据源码包结构简单梳理：
1.animation: 动画 用于进场出场XY方向的各种动画，支持多种动画效果（Easing）
2.chart：图表控件， 支持LineChart、CandleStickChart、BarChart、PieChart等各种图表，而CombinedChart包含了所有图表，绘制k线图时，主图涉及分时图蜡烛图，K线指标，副图有指标和各种柱状图，所以可以直接都使用CombinedChart。
3.renderer: 渲染器，每个图表都对应有内容区数据渲染器，x轴 y轴渲染器，绘制圆圈，圆角，Legend的渲染器等，定制化图表就需要在渲染器做文章。
4.matrix：3维矩阵，映射至xyz轴，用于做缩放平移旋转运算。在工具类ViewPortHandler中封装了很多关于变换的api，所以和矩阵打交道的情况比较少。
5.data： 举个例子：指标线为线形图，需要使用LineData， 而LineData中可以放入多个LineDataSet，每个LineDataSet对应一条指标线，dataSet中封装了源数据Entry，以及该条数据线绘制需要的颜色、粗细、样式等属性。每一种图表分别有自己对应的Data、DataSet、Entry。
6.formatter： 颜色、数字、百分比等格式化的类。K线图时间坐标轴就需要自定义ValueFormatter
7.highlight：选中高亮时各个类型的图高亮表现是不一样的，对每个图表封装了合适的高亮信息的类。
8.component：x轴 y轴 限制线 MarkView Description等，就跟名字一样用于绘制对应的图表属性
9.jobs：维护的对象池，用于有序的处理缩放，平移，动画等事务
10.listener 触控点击选中事件监听等
k线图表需要进行较多的定制化的话建议看看源码，这里着重说一下BarLineChartBase中onDraw()方法，图表绘制的核心都在这里, 。从这里基本能看出可能存在哪些api， 通过了解绘制的流程基本可以大致知道需要定制图表功能时在哪个地方下功夫。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (mData == null)
return;
// 1.绘制网格背景
drawGridBackground(canvas);
// 自动缩放（开启后图表会自适应的合理的占满屏幕），所以肯定有个setAutoScaleMinMaxEnabled（）来开启禁用自动缩放
// （下面基本大部分绘制操作都会提供相应的Enable的开关）
if (mAutoScaleMinMaxEnabled) {
autoScale();
}
// 左边y轴，右边y轴，底部x轴在需要绘制时，先计算数据范围和图表尺寸之间的关系。
if (mAxisLeft.isEnabled())
mAxisRendererLeft.computeAxis(mAxisLeft.mAxisMinimum, mAxisLeft.mAxisMaximum, mAxisLeft.isInverted());
if (mAxisRight.isEnabled())
mAxisRendererRight.computeAxis(mAxisRight.mAxisMinimum, mAxisRight.mAxisMaximum, mAxisRight.isInverted());
if (mXAxis.isEnabled())
mXAxisRenderer.computeAxis(mXAxis.mAxisMinimum, mXAxis.mAxisMaximum, false);
// 绘制对应轴的坐标轴线（只是xy轴线条）
mXAxisRenderer.renderAxisLine(canvas);
mAxisRendererLeft.renderAxisLine(canvas);
mAxisRendererRight.renderAxisLine(canvas);
// 网格线，xy方向都有。注意这个isDrawGridLinesBehindDataEnabled决定了背景网格线层级，
// 默认为true，先绘制网格线再绘制K线等数据线，反之网格线会盖在数据线上方
if (mXAxis.isDrawGridLinesBehindDataEnabled())
mXAxisRenderer.renderGridLines(canvas);
if (mAxisLeft.isDrawGridLinesBehindDataEnabled())
mAxisRendererLeft.renderGridLines(canvas);
if (mAxisRight.isDrawGridLinesBehindDataEnabled())
mAxisRendererRight.renderGridLines(canvas);
// 限制线 和网格线一样可以设置层级
if (mXAxis.isEnabled() && mXAxis.isDrawLimitLinesBehindDataEnabled())
mXAxisRenderer.renderLimitLines(canvas);
if (mAxisLeft.isEnabled() && mAxisLeft.isDrawLimitLinesBehindDataEnabled())
mAxisRendererLeft.renderLimitLines(canvas);
if (mAxisRight.isEnabled() && mAxisRight.isDrawLimitLinesBehindDataEnabled())
mAxisRendererRight.renderLimitLines(canvas);
// 画布会被裁剪， 保证后续绘制在坐标轴以内进行（注意了重写下面的方法drawData renderGridLines等时，都不会超过坐标轴线）
int clipRestoreCount = canvas.save();
canvas.clipRect(mViewPortHandler.getContentRect());
// ****** 数据绘制
mRenderer.drawData(canvas);
// 根据isDrawGridLinesBehindDataEnabled的设置确定网格线到底绘制在数据线之前还是之后
if (!mXAxis.isDrawGridLinesBehindDataEnabled())
mXAxisRenderer.renderGridLines(canvas);
if (!mAxisLeft.isDrawGridLinesBehindDataEnabled())
mAxisRendererLeft.renderGridLines(canvas);
if (!mAxisRight.isDrawGridLinesBehindDataEnabled())
mAxisRendererRight.renderGridLines(canvas);
// if highlighting is enabled 高亮绘制
if (valuesToHighlight())
mRenderer.drawHighlighted(canvas, mIndicesToHighlight);
// Removes clipping rectangle 又把画布给恢复啦，所以下面的绘制操作是可以超出坐标轴以外了
canvas.restoreToCount(clipRestoreCount);
// 额外的绘制，后续我们会有不少需求的实现就需要重写drawExtras
mRenderer.drawExtras(canvas);
if (mXAxis.isEnabled() && !mXAxis.isDrawLimitLinesBehindDataEnabled())
mXAxisRenderer.renderLimitLines(canvas);
if (mAxisLeft.isEnabled() && !mAxisLeft.isDrawLimitLinesBehindDataEnabled())
mAxisRendererLeft.renderLimitLines(canvas);
if (mAxisRight.isEnabled() && !mAxisRight.isDrawLimitLinesBehindDataEnabled())
mAxisRendererRight.renderLimitLines(canvas);
// 坐标轴上的刻度标签
mXAxisRenderer.renderAxisLabels(canvas);
mAxisRendererLeft.renderAxisLabels(canvas);
mAxisRendererRight.renderAxisLabels(canvas);
// 每一个数据点标示值绘制
if (isClipValuesToContentEnabled()) {
clipRestoreCount = canvas.save();
canvas.clipRect(mViewPortHandler.getContentRect());
mRenderer.drawValues(canvas);
canvas.restoreToCount(clipRestoreCount);
} else {
mRenderer.drawValues(canvas);
}
mLegendRenderer.renderLegend(canvas);
// 描述（比如加载不到数据时显示的文本）
drawDescription(canvas);
// 标记控件
drawMarkers(canvas);
}
从上面可以看出绘制操作都会使用对应的Renderer来执行（mRenderer，mXAxisRenderer，mAxisRendererLeft等），而chart本身更多的是设置绘制开关之类的一些属性。后续会根据遇到的需求疑难点逐个说一下处理方法思路。
一、高亮线的自定义
从上面的代码可以看出高亮线绘制是使用chart自身控件类型的Renderer（CombinedChartRenderer/ LineChartRenderer/BarChartRenderer...）。
if (valuesToHighlight())
mRenderer.drawHighlighted(canvas, mIndicesToHighlight);
所以根据需求重写其drawHighlighted方法就可以了，我这里用的CombinedChart，需求只需要高亮十字线上加个圆圈，CombinedChart的Renderer是CombinedChartRenderer，只需要新建CombinedChartRenderer的子类，重写drawHighlighted方法，把这个自定义的renderer在初始化后设置给chart即可。
// CombinedChartRenderer的子类中
@Override
public void drawHighlighted(Canvas c, Highlight[] indices) {
super.drawHighlighted(c, indices);
Bitmap bitmap;
if (mCallback == null || (bitmap = mCallback.getCrossBitmap()) == null) {
return;
}
for (Highlight high : indices) {
float drawX = high.getDrawX();
float drawY = high.getDrawY();
if (bitmap.isRecycled()) {
return;
}
c.drawBitmap(bitmap, drawX - bitmap.getWidth() / 2, drawY - bitmap.getHeight() / 2, mDrawPaint);
}
}
// chart类中
mChartRenderer = new MyCombineChartRenderer(this, mAnimator, mViewPortHandler);
mChartRenderer.setCombineCallback(this);
setRenderer(mChartRenderer);
需要更改高亮线的样式可以看一下drawHighlighted中的具体实现，其mHighlightPaint的参数设置是从dataSet中获取的，所以在准备数据阶段是可以通过设置dataSet来确定高亮线的样式。比如LineDataSet中可以设置颜色，宽度，虚线样式等
// LineDataSet中设置高亮线的方法
public void setHighLightColor(int color);
public void setHighlightLineWidth(float width)
public void enableDashedHighlightLine(float lineLength, float spaceLength, float phase); // 设置虚线样式
public void setDrawHighlightIndicators(boolean enabled)
......
效果图：
